flutter控件之ListView

2023-05-03  本文已影响0人  肉肉要次肉

listView相当于iOS的tableview

构造方法:

ListView

适用场景:有限的item情况下

ListView(

       children: [

         ListTile(title: Text('普通ListView1')),

         ListTile(title: Text('普通ListView2')),

         ListTile(title: Text('普通ListView3')),

         ListTile(title: Text('普通ListView4')),

         ListTile(title: Text('普通ListView5')),

       ],

),

ListView.builder

适用场景:长列表时采用builder模式,能提高性能。不是把所有子控件都构造出来,而是在控件viewport加上头尾的cacheExtent这个范围内的子Item才会被构造。在构造时传递一个builder,按需加载是一个惯用模式,能提高加载性能

ListoneItem = [

ItemModel(0,'个人资料'), ItemModel(1, '商务合作'), ItemModel(2, '商家入驻'), ItemModel(3, '联系客服'),

];

class ItemModel {

  int id;

  String name;

  ItemModel(this.id, this.name);

}

ListView.builder(

  physics:const NeverScrollableScrollPhysics(),//禁滑

  padding: EdgeInsets.zero,//去除底部留白

  itemCount:ThreeItem.length,

  shrinkWrap:true,

  itemBuilder: (BuildContext context, int index) {

return new Container(

      height:60,

      padding:EdgeInsets.only(left:15,right:15),

      child:Row(

         children: [

              Text( ThreeItem[index].name, style:TextStyle(fontSize:16)),

               Expanded(child:SizedBox.shrink()),

              // SvgPicture.asset('images/rightIcon.svg',),

             Image.asset('images/rightImg.png',width:16,height:16,),

        ],

      ),

    );

  },

),

ListView.separated

适用场景:列表中需要分割线时,可以自定义复杂的分割线

它比ListView.builder多了一个separatorBuilder参数,该参数是一个分割组件生成器。

上一篇下一篇

猜你喜欢

热点阅读