FlutterListView
ListView是最常用的可滚动组件之一,它可以沿一个方向线性排布所有子组件,并且它也支持列表项懒加载(在需要时才会创建)。
我们看看ListView的默认构造函数定义:ListView({。。。可滚动widget公共参数AxisscrollDirectionAxis。vertical,boolreversefalse,ScrollController?controller,bool?primary,ScrollPhysics?physics,EdgeInsetsGeometry?padding,ListView各个构造函数的共同参数double?itemExtent,该参数如果不为null,则会强制children的长度为itemExtent的Widget?prototypeItem,通知list我所有的子项都和这个的高度一样,方便计算该属性表示是否根据子组件的总长度来设置ListView的长度当ListView在一个无边界(滚动方向上)的容器中时,shrinkWrap必须为true。boolshrinkWrapfalse,booladdAutomaticKeepAlivestrue,booladdRepaintBoundariestrue,double?cacheExtent,预渲染区域长度子widget列表ListWidgetchildrenconstWidget〔〕,})
classListViewState1extendsStatelessWidget{overrideWidgetbuild(BuildContextcontext){TODO:implementbuildreturnListView(shrinkWrap:true,padding:EdgeInsets。all(20),children:constWidget〔Text(Imdedicatingeverydaytoyou,style:TextStyle(height:2),),Text(Domesticlifewasneverquitemystyle,style:TextStyle(height:2),),Text(Whenyousmile,youknockmeout,Ifallapart,style:TextStyle(height:2),),Text(AndIthoughtIwassosmart,style:TextStyle(height:2),),Text(Imdedicatingeverydaytoyou,style:TextStyle(height:2),),Text(Domesticlifewasneverquitemystyle,style:TextStyle(height:2),),Text(Whenyousmile,youknockmeout,Ifallapart,style:TextStyle(height:2),),Text(AndIthoughtIwassosmart,style:TextStyle(height:2),),Text(Imdedicatingeverydaytoyou,style:TextStyle(height:2),),Text(Domesticlifewasneverquitemystyle,style:TextStyle(height:2),),Text(Whenyousmile,youknockmeout,Ifallapart,style:TextStyle(height:2),),Text(AndIthoughtIwassosmart,style:TextStyle(height:2),),〕,);}}
ListView。builder适合列表项比较多或者列表项不确定的情况dartitemBuilder:它是列表项的构建器itemCount:列表项的数量,如果为null,则为无限列表。ListView。builderprototypeItemitemCount展示ListTile一个简单的组件classListViewState3extendsStatelessWidget{overrideWidgetbuild(BuildContextcontext){TODO:implementbuildreturnListView。builder(prototypeItem:ListTile(title:Text(1)),itemCount:56,itemBuilder:(context,index){returnListTile(title:Text(index));},);}}ListView。separated
ListView。separated可以在生成的列表项之间添加一个分割组件,它比ListView。builder多了一个separatorBuilder参数,该参数是一个分割组件生成器。
classListViewState4extendsStatelessWidget{下划线widget预定义以供复用。Widgetpider1Divider(color:Colors。blue,);Widgetpider2Divider(color:Colors。green);ListStringlist2〔1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5〕;overrideWidgetbuild(BuildContextcontext){TODO:implementbuildreturnScrollbar(child:ListView。separated(itemCount:list2。length,itemBuilder:(BuildContextcontext,intindex){returnListTile(title:Text(list2〔index〕));},separatorBuilder:(BuildContextcontext,intindex){returnindex20?pider1:pider2;},));}}固定高度列表
给列表指定itemExtent或prototypeItem会有更高的性能,所以当我们知道列表项的高度都相同时,强烈建议指定itemExtent或prototypeItem
实例:给一个listview动态添加数据
1动态添加需要State所有需要构建StatefulWidgetclassMyListViewState0extendsStatefulWidget{constMyListViewState0({Key?key}):super(key:key);overrideStateMyListViewState0createState()MyState0();}classMyState0extendsStateMyListViewState0{初始化数据源ListStringlist2〔1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5〕;overrideWidgetbuild(BuildContextcontext){returnConstrainedBox(constraints:BoxConstraints。tightFor(width:double。infinity),child:Column(children:Widget〔ElevatedButton(onPressed:(){刷新statesetState((){点击按钮时itemss自加一itemss;添加到数据中list2。insert(0,itemss);});},child:Text(点击1)),Expanded(child:ListViewState2(list2))〕,));}}classListViewState2extendsStatelessWidget{ListStringlist〔〕;ListViewState2(ListStringitem,{Key?key}):super(key:key){listitem;}overrideWidgetbuild(BuildContextcontext){TODO:implementbuildreturnScrollbar(child:ListView。builder(itemCount:list。length,itemExtent:50,itemBuilder:(BuildContextcontext,intindex){returnText(list〔index〕);}));}}