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

完整工程：

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

详细解读:

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

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

一、前言

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

二、使用的组件

1. ListView

属性	释义	类型
itemCount	列表项数量	int
prototypeItem	计算预加载空间	Widget
itemBuilder	实际展示内容	Widget

2. ListTile

属性	释义	类型
title	标题	Widget
subtitle	子标题	Widget
trailing	右侧组件	Widget

           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...