Flutter基础组件(3-1)-ListView(ListVi
2019-11-28 本文已影响0人
周灬
在我们开发App的时,最常用的就是列表,在flutter中使用ListView来实现类表的功能.
1.ListView使用方法
1.1 ListView()
ListView的创建方法是直接调用其默认的构造函数来创建列表.
下面我们就来看下其构造函数:
ListView({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
this.itemExtent,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
List<Widget> children = const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.down,
})
- key:做一个标志来使用,相当于iOS中的tag;
- scrollDirection:列表的滚动方向，可选值有Axis的horizontal和vertical，可以看到默认是垂直方向上滚动;
- reverse:是一个bool值,选择是否翻转;
- controller:控制器,处理与列表滚动相关的,比如监听列表的滚动的事件,滚动的位置;
- physics: 列表滚动至边缘后继续拖动的物理效果，Android与iOS效果不同。Android会呈现出一个波纹状（对应ClampingScrollPhysics），而iOS上有一个回弹的弹性效果（对应BouncingScrollPhysics）。如果你想不同的平台上呈现各自的效果可以使用AlwaysScrollableScrollPhysics，它会根据不同平台自动选用各自的物理效果。如果你想禁用在边缘的拖动效果，那可以使用NeverScrollableScrollPhysics;
- shrinkWrap: 该属性将决定列表的长度是否仅包裹其内容的长度。当ListView嵌在一个无限长的容器组件中时，shrinkWrap必须为true，否则Flutter会给出警告;
- padding: 列表内边距；
- itemExtent: 子元素长度。当列表中的每一项长度是固定的情况下可以指定该值，有助于提高列表的性能(因为它可以帮助ListView在未实际渲染子元素之前就计算出每一项元素的位置);
- cacheExtent: 预渲染区域长度，ListView会在其可视区域的两边留一个cacheExtent长度的区域作为预渲染区域（对于ListView.build或ListView.separated构造函数创建的列表，不在可视区域和预渲染区域内的子元素不会被创建或会被销毁）；
- children: 容纳子元素的组件数组;
默认的创建模式:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
Widget _getListItem(String title,IconData icon){
return Container(
child: ListTile(
leading: Icon(icon),
trailing: Icon(icon),
title: Text(title),
subtitle: Text('我是将军'),
),
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'textTitle',
home: Scaffold(
appBar: AppBar(
title: Text('最后战役'),
),
body: Center(
child: ListView(
children: <Widget>[
_getListItem('第一行', Icons.map),
_getListItem('第二行', Icons.phone),
_getListItem('第三行', Icons.adb),
],
),
),
),
);
}
}
1.2 ListTitle()
在上面的代码部分出现了一个ListTitle,ListTile 是Flutter 给我们准备好的widget 提供非常常见的构造和定义方式，包括文字，icon，点击事件，一般是能够满足基本需求，但是就不能自己定义了.
ListTitle的属性
this.leading, // item 前置图标
this.title, // item 标题
this.subtitle, // item 副标题
this.trailing, // item 后置图标
this.isThreeLine = false, // item 是否三行显示
this.dense, // item 直观感受是整体大小
this.contentPadding, // item 内容内边距
this.enabled = true,
this.onTap, // item onTap 点击事件
this.onLongPress, // item onLongPress 长按事件
this.selected = false, // item 是否选中状态
1.1的效果图.png
1.3 ListView builder()
builder 顾名思义 构造 可以非常方便的构建我们自己定义的child布局，所以在Flutter中非常的常用。
builder属性详细介绍
//设置滑动方向 Axis.horizontal 水平 默认 Axis.vertical 垂直
scrollDirection: Axis.vertical,
//内间距EdgeInsets.all(),EdgeInsets.only().
padding: EdgeInsets.all(10.0),
//是否倒序显示 默认正序 false 倒序true
reverse: false,
//false，如果内容不足，则用户无法滚动 而如果[primary]为true，它们总是可以尝试滚动。
primary: true,
//确定每一个item的高度 会让item加载更加高效
itemExtent: 50.0,
//内容适配
shrinkWrap: true,
//item 数量
itemCount: list.length,
//滑动类型设置
physics: new ClampingScrollPhysics(),
//cacheExtent 设置预加载的区域
cacheExtent: 30.0,
//滑动监听
controller ,
- child 高度会适配 item填充的内容的高度,我们非常的不希望child的高度固定，因为这样的话，如果里面的内容超出就会造成布局的溢出。
- shrinkWrap多用于嵌套listView中 内容大小不确定 比如 垂直布局中 先后放入文字 listView （需要Expend包裹否则无法显示无穷大高度 但是需要确定listview高度 shrinkWrap使用内容适配不会有这样的影响）.
- primary在构造中默认是false 它的意思就是为主的意思，primary为true时，我们的controller 滑动监听就不能使用了.
- physics这个属性几个滑动的选择:
AlwaysScrollableScrollPhysics() 总是可以滑动
NeverScrollableScrollPhysics禁止滚动
BouncingScrollPhysics 内容超过一屏 上拉有回弹效果
ClampingScrollPhysics 包裹内容 不会有回弹- cacheExtent这个属性的意思就是预加载的区域,设置预加载的区域 cacheExtent 强制设置为了 0.0，从而关闭了“预加载”.
- controller滑动监听，我们多用于上拉加载更多，通过监听滑动的距离来执行操作。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'textTitle',
home: Scaffold(
appBar: AppBar(
title: Text('最后战役'),
),
body: Container(
child:listViewLayoutBuilder(),
),
),
);
}
}
///listView builder 构建
Widget listViewLayoutBuilder() {
return ListView.builder(
scrollDirection: Axis.vertical,
padding: EdgeInsets.all(10.0),
reverse: false,
primary: true,
itemExtent: 50.0,
shrinkWrap: true,
itemCount: 4,
cacheExtent: 30.0,
physics: new ClampingScrollPhysics(),
itemBuilder: (context, i){
return Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Text(
"1",
style: new TextStyle(fontSize: 18.0, color: Colors.red),
),
new Text(
"2",
style: new TextStyle(fontSize: 18.0, color: Colors.green),
),
new Text(
"3",
style: new TextStyle(fontSize: 18.0, color: Colors.blue),
),
],
),
);}
);
}
2.ListView的分割线加入
2.1 builder模式来设置分割线
我们在正常的需求中大部分是需要item的分割线的，而在builder模式中使用divide 会有种情况（divide放在item的布局中 通过Column），我们会发现divide并没有直接延时到item两端而是会有左右padding。
所以我们可以通过另外一种方式去实现。
//1.扩大list容积 为什么是两倍，因为我们给了divide的index
Widget listView = new ListView.builder(
itemCount: list.length * 2 ,
itemBuilder: (context, index) => itemDividerRow(context, index));
//2. 根据下标分配item类型
itemDividerRow(context, int i) {
if (i.isOdd) {//是奇数
return new Divider( //返回分割线
height: 1.0,
);
} else {
i = i ~/ 2;
return getRowWidget(context, orderList[i]); //返回item 布局
}
}
这样我们就可以去实现了，builder模式分割线 .
2.2 ListView separated
ListView.separated的模式更加方便我们给列表页面添加分割线.
ListView.separated({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
@required IndexedWidgetBuilder itemBuilder,
@required IndexedWidgetBuilder separatorBuilder, //分割线
@required int itemCount,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
})
从属性大部分可以看出和flutter的ListView属性差不多.比ListView多了一个separatorBuilder的属性.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'textTitle',
home: Scaffold(
appBar: AppBar(
title: Text('最后战役'),
),
body: Container(
child: ListViewBuilder(),
),
),
);
}
}
class ListViewBuilder extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _ListViewBuilder();
}
}
class _ListViewBuilder extends State<ListViewBuilder> {
/*初始项为50个*/
List<int> indexs = List.generate(50, (index) {
return index;
});
@override
Widget build(BuildContext context) {
/*灰色分割线*/
var divider = Divider(
color: Colors.grey,
);
return ListView.separated(
padding: EdgeInsets.all(10),
itemCount: indexs.length,
separatorBuilder: (context, index) {
return divider;
},
itemBuilder: (context, index) {
/*加载到底部时且集合数量小于100的话，获取更多数据*/
if (index == indexs.length - 1 && indexs.length < 100) {
_getMoreData(index);
}
return Text("${index}");
});
}
void _getMoreData(int index) {
Future.delayed(Duration(milliseconds: 300)).then((e) {
setState(() {
/*往集合里添加10条数据*/
indexs.addAll(List.generate(10, (i) {
return index + i;
}));
});
});
}
}
想了解更多Flutter学习知识请联系:QQ(814299221)
