美文网首页
flutter控件之ListView

flutter控件之ListView

作者: 肉肉要次肉 | 来源:发表于2023-05-03 17:33 被阅读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参数,该参数是一个分割组件生成器。

    相关文章

      网友评论

          本文标题:flutter控件之ListView

          本文链接:https://www.haomeiwen.com/subject/zdphjdtx.html