【自学Flutter】20.3 ListView.separated 的使用

20.3 ListView.separated 的使用

1.源代码

import 'package:flutter/material.dart';void main () => runApp(MyApp());class MyApp extends StatefulWidget {@override_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {@overrideWidget build(BuildContext context) {Widget redDivider = Divider(color: Colors.red);Widget blueDivider = Divider(color: Colors.blue);return MaterialApp(home: Scaffold(body: Scrollbar(child: Center(child: ListView.separated(itemCount: 50,separatorBuilder: (BuildContext context, int index){return index % 2 == 0 ? redDivider:blueDivider;},itemBuilder: (BuildContext context, int index){return ListTile(title: Text("我是列表$index"),);},)),),));}
}

2.解释源代码

import 'package:flutter/material.dart';void main () => runApp(MyApp());class MyApp extends StatefulWidget {@override_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {@overrideWidget build(BuildContext context) {//声明不同颜色的分割线Widget redDivider = Divider(color: Colors.red);Widget blueDivider = Divider(color: Colors.blue);return MaterialApp(home: Scaffold(body: Scrollbar(child: Center(child: ListView.separated(itemCount: 50,//判断奇偶数进行分割线颜色处理separatorBuilder: (BuildContext context, int index){return index % 2 == 0 ? redDivider:blueDivider;},itemBuilder: (BuildContext context, int index){return ListTile(title: Text("我是列表$index"),);},)),),));}
}

3.效果图

【自学Flutter】20.3 ListView.separated 的使用相关推荐

Flutter开发之ListView组件（21）
欢迎点赞+关注.你的鼓励是我写作的动力! ListView是一个类似列的widget,它的内容对于其渲染框太长时会自动提供滚动. ListView 摘要: 用于组织盒子中列表的特殊Column 可以水 ...
Flutter 28: 图解 ListView/GridView 混用时滑动冲突小尝试
小菜在学习过程中会在一个 Page 页面同时用到 GridView 和 ListView 或多个 ListView,此时就会遇到常见的滑动冲突问题.小菜尝试了两种解决滑动冲突的方案,仅记录一下基本的使 ...
Flutter开发之ListView下拉刷新上拉加载更多（35）
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
Flutter 小知识:ListView播放视频列表(一)
Flutter ListView播放视频列表① ListView布局视频播放器加'开始'文字点击'开始'播放视频全局控制器修改点击BUG ListView优化. 誓言用来拴骚动的心,终就拴住了虚 ...
Flutter开发之ListView添加HeaderView和FooterView-2（39）
参考文章:RecyclerView添加HeaderView和FooterView 接着Flutter开发之ListView添加HeaderView和FooterView-1 继续研究. 通过Recyc ...
Flutter开发之ListView使用第三方flutter_refresh加载更多（37）
在Flutter开发之ListView使用第三方pull_to_refresh加载更多(36) 中我们实现了下拉刷新.上拉分页加载的功能.今天介绍另一个ListView使用第三方flutter_ref ...
Flutter开发之ListView使用第三方pull_to_refresh加载更多（36）
在Flutter开发之ListView下拉刷新&上拉加载更多(35) 中我们实现了下拉刷新.上拉分页加载的功能.但是使用起来非常不方便,且不满一屏时难以处理. 今天介绍ListView使用第三 ...
Flutter开发之ListView添加HeaderView和FooterView（38）
参考文章:Flutter ListView如何添加HeaderView和FooterView flutter的ListView添加HeaderView和FooterView使用CustomScroll ...
Flutter 21: 图解 ListView 下拉刷新与上拉加载 (三)【RefreshIndicator】
小菜前段时间整理了两种 ListView 的异步加载数据时,下拉刷新与上滑加载更多的方式,每种方式都有自己的优势,网上也有很多大神讲解过 ListView 数据流的种种处理方式,小菜根据实际遇到的情况 ...
Flutter 15: 图解 ListView 不同样式 item 及 Widget 显隐性
一年一度的谷歌大会又开始了,谷歌对 Flutter 的投入力度又加大了,所以更得好好学 Flutter 了.小菜在做新闻列表方面的 Demo 时,想到会在列表中展示多种不同 item 样式,今天特意借 ...

【自学Flutter】20.3 ListView.separated 的使用

20.3 ListView.separated 的使用

1.源代码

2.解释源代码

3.效果图

【自学Flutter】20.3 ListView.separated 的使用相关推荐

最新文章

热门文章