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个标题@overrideWidget 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...