Flutter系列（七）ListView 图文列表详解

完整工程：

Flutter系列（四）底部导航+顶部导航+图文列表完整代码_摸金青年v的博客-CSDN博客

详细解读:

Flutter系列（五）底部导航详解_摸金青年v的博客-CSDN博客

Flutter系列（六）顶部导航详解_摸金青年v的博客-CSDN博客

一、前言

        本文介绍一种flutter常见布局结构：图文列表，常用于新闻资讯类app展示信息

二、使用的组件

1. ListView

2. ListTile

           title使用Text组件，trailing右侧组件使用Image组件

3. Image

1）加载本地图片

条件1:  配置图片加载路径，在pubspec.yaml 添加配置

  assets:
     - images/mobile.jpg

条件2：创建图片文件夹images放图片,  images创建在工程的根路径，和lib同级目录

使用：

Image.asset('images/mobile.jpg',
              fit: BoxFit.fill,
              width: 64,
              height: 64),
        ),

2）加载网络图片

条件：对于真机调试，需要申请网络权限

在 app/src/main/AndroidManifest.xml 配置：和<application>同级

<!-- 申请访问网络权限 -->
<uses-permission android:name="android.permission.INTERNET"></uses-permission>

使用: 

Image.network('https://img-blog.csdnimg.cn/c6dfd375abf1433fa3a42951cc186a2b.jpeg',
                fit: BoxFit.fill,
                width: 64,
                height: 64),

图片素材来源：https://pixabay.com/zh/    免版权图片网站

图片上传至csdn

网络加载使用：https://img-blog.csdnimg.cn/c6dfd375abf1433fa3a42951cc186a2b.jpeg

预加载使用本地图片：images/mobile.jpg

三、图文列表完整代码

 final List<String> items = List<String>.generate(50, (i) => 'Item $i'); //50个标题

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: items.length,
        //prototypeItem 计算预加载需要的空间，内容和ListTile相同
        prototypeItem: ListTile(
          title: Text(items.first),
          subtitle: Text(items.first),
          trailing: Image.asset('images/mobile.jpg',
              fit: BoxFit.fill,
              width: 64,
              height: 64),
        ),
        itemBuilder: (context, index) {
          //ListTile 实际展示的列表内容
          return ListTile(
            title: Text(items[index]),  //大标题
            subtitle: Text(items[index]),  //小标题
            trailing: Image.network('https://img-blog.csdnimg.cn/c6dfd375abf1433fa3a42951cc186a2b.jpeg',
                fit: BoxFit.fill,
                width: 64,
                height: 64),
          );
        },
      ),
    );
  }

展示样式和完整工程：

Flutter系列（四）底部导航+顶部导航+图文列表完整代码_摸金青年v的博客-CSDN博客

END...