Flutter ListView使用方法

ListView使用方法

ListView 内部组合了 Scrollable、Viewport 和 Sliver，需要注意：

• ListView 中的列表项组件都是 RenderBox，并不是 Sliver， 这个一定要注意。
• 一个 ListView 中只有一个Sliver，对列表项进行按需加载的逻辑是 Sliver 中实现的。
• ListView 的 Sliver 默认是 SliverList，如果指定了 itemExtent ，则会使用 SliverFixedExtentList；如果 - prototypeItem 属性不为空，则会使用 SliverPrototypeExtentList，无论是是哪个，都实现了子组件的按需加载模型。

///
/// ListView 线性列表class ListViewApp extends StatelessWidget {const ListViewApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) => _ListViewPage();
}class _ListViewPage extends StatefulWidget {@overrideState<StatefulWidget> createState() => _ListViewState();
}class _ListViewState extends State<_ListViewPage> {@overridevoid initState() {// TODO: implement initStatesuper.initState();}@overrideWidget build(BuildContext context) => MaterialApp(home: PageView(children: [Scaffold(appBar: AppBar(title: const Text('这是用构造函数创建的'),centerTitle: true,),body: ListView(//控件高度itemExtent: 200,//横向滚动scrollDirection: Axis.horizontal,//分割线包裹children: ListTile.divideTiles(color: Colors.black,context: context,tiles: [Container(margin: const EdgeInsets.only(left: 10, right: 10, top: 100, bottom: 100),decoration: ShapeDecoration(image: const DecorationImage(image: NetworkImage('https://th.bing.com/th/id/OIP.1_lUKm-qhDMmh_zz3fw7EwHaE7?w=284&h=189&c=7&r=0&o=5&dpr=2&pid=1.7'),fit: BoxFit.cover),shape: RoundedRectangleBorder(borderRadius:BorderRadiusDirectional.circular(20))),child: const Align(child: Padding(padding: EdgeInsets.all(8.0),child: Text("Container decoration实现圆角(radius = 20)",style: TextStyle(color: Colors.blueAccent),),),alignment: Alignment.bottomCenter,),),Container(alignment: Alignment.center,margin: const EdgeInsets.only(left: 10, right: 10, top: 100, bottom: 100),decoration: const BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(20)),color: Colors.blueAccent),padding: const EdgeInsets.all(20),child: const Text('这是文本item',style: TextStyle(fontSize: 30, color: Colors.white),),),Container(margin: const EdgeInsets.only(left: 10, right: 10, top: 100, bottom: 100),decoration: ShapeDecoration(image: const DecorationImage(image: NetworkImage('https://th.bing.com/th/id/OIP.1_lUKm-qhDMmh_zz3fw7EwHaE7?w=284&h=189&c=7&r=0&o=5&dpr=2&pid=1.7'),fit: BoxFit.cover),shape: RoundedRectangleBorder(borderRadius:BorderRadiusDirectional.circular(20))),width: double.maxFinite,child: const Align(child: Padding(padding: EdgeInsets.all(8.0),child: Text("Container decoration实现圆角(radius = 20)",style: TextStyle(color: Colors.blueAccent),),),alignment: Alignment.bottomCenter,),),Container(margin: const EdgeInsets.only(left: 10, right: 10, top: 100, bottom: 100),decoration: const BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(20)),color: Colors.blueAccent),alignment: Alignment.center,padding: const EdgeInsets.all(20),child: const Text('这是文本item',style: TextStyle(fontSize: 30, color: Colors.white),),),]).toList(),),),//使用builder函数创建的Scaffold(appBar: AppBar(title: const Text('这是build函数创建的'),centerTitle: true,),body: ListView.builder(//item总条数，如果不设置就是无限多条itemCount: 20,//item高度itemExtent: 80,itemBuilder: (BuildContext context, int index) {return ListTile(//文本内容上面添加个图标leading: const CircleAvatar(backgroundImage: NetworkImage('https://th.bing.com/th/id/OIP.cocZ4jgMxBCJLexP8JaKoAHaE7?w=246&h=180&c=7&r=0&o=5&dpr=2&pid=1.7'),),//最右边添加图片或者其他控件都行trailing: const Icon(Icons.navigate_next_outlined),//上面的文本内容title: Text('这是Title$index'),//下面的文本内容subtitle: Text('这是SubTitle$index'),dense: true,//文本颜色textColor: Colors.lightBlue[100 * (index + 1)],//背景色tileColor: Colors.white54,style: ListTileStyle.drawer,//设置内边距默认是16contentPadding: const EdgeInsets.all(14),//选中状态selected: index % 7 == 0,//选中的文本颜色selectedColor: Colors.deepOrange,//选中的背景色selectedTileColor: Colors.deepPurple,//点击事件onTap: () {},//长安点击onLongPress: () {},//是否禁用，禁用后就不能点击了enabled: index % 3 != 0,);}),),//使用separated创建的可以创建分割组件Scaffold(appBar: AppBar(title: const Text('这是build函数创建的'),centerTitle: true,),body: ListView.separated(//翻转从下往上滚动reverse: true,//item总条数，如果不设置就是无限多条itemCount: 20,//item之间的分割自定义组件，也可使用ListTile.divideTiles包裹separatorBuilder: (BuildContext context, int index) {return Container(child: const Text('我是分割线'),color: Colors.amber,alignment: Alignment.center,);},itemBuilder: (BuildContext context, int index) {return ListTile(//文本内容上面添加个图标leading: const CircleAvatar(backgroundImage: NetworkImage('https://th.bing.com/th/id/OIP.cocZ4jgMxBCJLexP8JaKoAHaE7?w=246&h=180&c=7&r=0&o=5&dpr=2&pid=1.7'),),//最右边添加图片或者其他控件都行trailing: const Icon(Icons.navigate_next_outlined),//上面的文本内容title: Text('这是Title$index'),//下面的文本内容subtitle: Text('这是SubTitle$index'),dense: true,//文本颜色textColor: Colors.lightBlue[100 * (index + 1)],//背景色tileColor: Colors.white54,style: ListTileStyle.drawer,//设置内边距默认是16contentPadding: const EdgeInsets.all(14),//选中状态selected: index % 7 == 0,//选中的文本颜色selectedColor: Colors.deepOrange,//选中的背景色selectedTileColor: Colors.deepPurple,//点击事件onTap: () {},//长安点击onLongPress: () {},//是否禁用，禁用后就不能点击了enabled: index % 3 != 0,);}),)],),);
}

使用实例

///
/// ListView 线性列表
void main(){runApp(const ListViewApp())
}
class ListViewApp extends StatelessWidget {const ListViewApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) => _ListViewPage();
}class _ListViewPage extends StatefulWidget {@overrideState<StatefulWidget> createState() => _ListViewMoreState();
}
///
/// 分页加载数据
///
class _ListViewMoreState extends State<_ListViewPage> {static const tagLastPage = "加载更多...";final _data = <String>[tagLastPage];////// 模拟加载数据Future<void> _loadingMoreDate(bool ifRefresh) {return Future.delayed(const Duration(milliseconds: 3000), () {setState(() {if (ifRefresh) {_data.clear();_data.add(tagLastPage);}for (int i = 0; i < 20; i++) {_data.insert(_data.length - 1, "item${_data.length}");}});return null;});}@overridevoid initState() {super.initState();}@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(//下拉刷新body: RefreshIndicator(onRefresh: () {return _loadingMoreDate(true);},child: ListView.separated(itemCount: _data.length,separatorBuilder: (context, index) {return const Divider(height: 1,color: Colors.grey,);},itemBuilder: (context, index) {if (_data[index] == tagLastPage) {if (_data.length > 100) {return const ListTile(title: Center(child: Text('没有更多数据'),),textColor: Colors.grey,);} else {_loadingMoreDate(false); //加载下一页数据return ListTile(title: Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: [const CircularProgressIndicator(),const SizedBox(width: 14,),Text(_data[index])],),),textColor: Colors.grey,);}} else {return ListTile(//点击删除当前itemonTap: () {_data.removeAt(index);setState(() {});},leading: const CircleAvatar(backgroundImage: NetworkImage('https://tse1.mm.bing.net/th/id/OET.2762872920ea4e6294085775af35b05f?w=272&h=272&c=7&rs=1&o=5&dpr=2&pid=1.9'),),title: Text(_data[index]),textColor: Colors.black,);}}),),),);}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！