Flutter学习笔记(13)--表单组件
程序员文章站
2022-03-08 17:13:59
在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源传递到Adapter中,最终进行列表数据的展示,那么在Flutter中如何处理列表数据呢? 在Flutter中,用ListView来显示列表项,其支持垂直和水平方向... ......
如需转载,请注明出处:flutter学习笔记(12)--列表组件
在日常的产品项目需求中,经常会有列表展示类的需求,在android中常用的做法是收集数据源,然后创建列表适配器adapter,将数据源传递到adapter中,最终进行列表数据的展示,那么在flutter中如何处理列表数据呢?
在flutter中,用listview来显示列表项,其支持垂直和水平方向展示,通过过一个属性我们就可以控制其方向,列表有以下分类:
1.水平的列表
2.垂直的列表
3.数据量非常大的列表
4.矩阵式的列表
-
垂直列表组件
属性名 | 类型 | 默认值 | 说明 |
scrolldirection | axis | axis.vertical | 列表的排列方向,axis.vertical为垂直方向,axis.horizontal为水平方向 |
padding | edgeinsetsgeometry | 列表内部的空白区域,如果有child的话,child位于padding内部 | |
reverse | bool | false | 组件排列反向 |
children | list<widget> | 列表元素,注意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: <widget>[ 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: <widget>[ //数据源 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: <widget>[ 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: <widget>[ //数据源 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<string> items = new list<string>.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: <widget>[ 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()。