作者：张哥他爹 | 来源：互联网 | 2023-07-15 18:13
如需转载，请注明出处：Flutter学习笔记（12）--列表组件在日常的产品项目需求中，经常会有列表展示类的需求，在Android中常用的做法是收集数据源，然后创建列表适配器Adapter，将数
如需转载，请注明出处：Flutter学习笔记（12）--列表组件
在日常的产品项目需求中，经常会有列表展示类的需求，在Android中常用的做法是收集数据源，然后创建列表适配器Adapter，将数据源传递到Adapter中，最终进行列表数据的展示，那么在Flutter中如何处理列表数据呢？
在Flutter中，用ListView来显示列表项，其支持垂直和水平方向展示，通过过一个属性我们就可以控制其方向，列表有以下分类：
1.水平的列表
2.垂直的列表
3.数据量非常大的列表
4.矩阵式的列表
ListView组件属性及描述
| 属性名 |
类型 |
默认值 |
说明 |
| ScrollDirection |
Axis |
Axis.vertical |
列表的排列方向，Axis.vertical为垂直方向，Axis.horizontal为水平方向 |
| padding |
EdgeInsetsGeometry |
|
列表内部的空白区域，如果有child的话，child位于padding内部 |
| reverse |
bool |
false |
组件排列反向 |
| children |
List |
|
列表元素，注意List元素全部为Widget类型 |
示例代码如下：
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'ListView Demo',
home: new ListViewDemo(),
);
}
}
class ListViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: Text('ListView Dmoe'),
leading: new Icon(Icons.menu,size: 40,color: Colors.white,),
actions: [
new IconButton(icon: Icon(Icons.search), onPressed: (){
Fluttertoast.showToast(msg: '点击了搜索按钮',toastLength: Toast.LENGTH_LONG,textColor: Colors.white,gravity: ToastGravity.BOTTOM);
})
],
),
body: new ListView(
// padding: new EdgeInsets.symmetric(vertical: 10,horizontal: 10),//给子元素设置水平和垂直方向的padding
padding: new EdgeInsets.only(left: 10,top: 0,right: 10,bottom: 0),//给子元素设置左、上、右、下的padding
children: [
//数据源
ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第一条数据'),),
ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第二条数据'),),
ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第三条数据'),),
ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第四条数据'),),
ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第五条数据'),),
ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第六条数据'),),
ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第七条数据'),),
ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第八条数据'),),
ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第九条数据'),),
ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第十条数据'),),
],
),
);
}
}
上面就是一个简单了垂直方向的列表，Demo里面我尝试了两种给子元素设置padding的方式，padding属性的会作用在整个ListView上，单个的子元素是没有作用到的。附上一下效果截图：
示例代码如下：
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'ListView Demo',
home: new ListViewDemo(),
);
}
}
class ListViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: Text('ListView Dmoe'),
leading: new Icon(Icons.menu,size: 40,color: Colors.white,),
actions: [
new IconButton(icon: Icon(Icons.search), onPressed: (){
Fluttertoast.showToast(msg: '点击了搜索按钮',toastLength: Toast.LENGTH_LONG,textColor: Colors.white,gravity: ToastGravity.BOTTOM);
})
],
),
body: Container(
height: 100,
child: new ListView(
scrollDirection: Axis.horizontal,
// padding: new EdgeInsets.symmetric(vertical: 10,horizontal: 10),//给子元素设置水平和垂直方向的padding
padding: new EdgeInsets.only(left: 10,top: 0,right: 10,bottom: 0),//给子元素设置左、上、右、下的padding
children: [
//数据源
Container(
width: 50,
color: Colors.blue,
),
Container(
width: 50,
color: Colors.green,
),
Container(
width: 50,
color: Colors.amberAccent,
),
Container(
width: 50,
color: Colors.blueGrey,
),
],
),
),
);
}
}
效果截图如下：
当列表的数据非常多时，需要使用长列表，比如淘宝后台的订单列表，手机通讯录等，这些列表项数据很多，长列表也是使用ListView作为基础组件，只不过需要添加一个列表项构造器itemBuilder。Flutter的长列表组件其实相当于Android中的RecyclerView，它会自动为您回收列表元素。在创建ListView.builder时，需要传入两个参数，一个列表的初始长度，一个itemBuilder函数
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget {
//初始化数据源
final List items = new List.generate(200, (i)=>"Item $i";
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '长列表组件',
debugShowCheckedModeBanner: false,
home: new Scaffold(
appBar: new AppBar(
title: Text('长列表组件'),
leading: Icon(Icons.menu,size: 30,color: Colors.white,),
actions: [
new IconButton(icon: Icon(Icons.search), onPressed: null)
],
),
body: new ListView.builder(
itemCount: items.length,
//列表构造器
itemBuilder: (context,index){
return new ListTile(
leading: Icon(Icons.add_circle),
title: new Text('${items[index]}'),
onTap: (){//给每一个item增加点击事件
Fluttertoast.showToast(
msg: '${items[index]}'+'被点击了',
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
textColor: Colors.white);
},
);
},
),
),
);
}
}
上面的代码，实现了当数据源比较多时的处理办法，而且给每一个item增加了点击事件onTap()。
下一章节：Flutter学习笔记（13）--表单组件
京公网安备 11010802041100号