完整工程：
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...
