Flutter中的列表

/ 0评 / 1

在移动端App中主要的展现形式就是列表,我这里简单介绍一下Flutter中实现列表的方法。

ListView

Flutter中提供了ListView这个组件来实现列表,直接来看实现方法

class ListViewApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'List Test',
      home: Scaffold(
        appBar: AppBar(
            title: Text('ListView Widget'),
          ),
        body: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.perm_camera_mic),
              title: Text('perm_camera_mic'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('phone'),
            ),
            ListTile(
              leading: Icon(Icons.access_time),
              title: Text('access_time'),
            ),
            ListTile(
              leading: Icon(Icons.tag_faces),
              title: Text('tag_faces'),
            ),
          ],
        ),
      ),
    );
  }
}

ListView另一种写法(常用)

上面那种写法是最基础的方法,平时我们基本不用,来看下面的方法

class ListViewApp extends StatelessWidget {
  final List<String> items;

  //构造方法,key父类必传的值,也是默认就有的,只需要传给父类构造方法即可
  ListViewApp({Key key, @required this.items}) : super(key:key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '动态列表',
      home: Scaffold(
        appBar: AppBar(title: Text('动态列表'),),
        body: ListView.builder(
          itemCount: items.length,   //数量
          itemBuilder: (context, index){
            return ListTile(title: Text('${items[index]}'));
          },
        ),
      ),
    );
  }
}

CustomScrollView

很多时候我们都需要一个带顶部的List,也就是iOS中的表头,那就用到了CustomScrollView,来看一下实现

class AccountPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _AccountState();
  }
}

class _AccountState extends State<AccountPage>{
  List<StaticListEntity> listItems = List();

  @override
  void initState() {
    super.initState();

    _initData();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
      color: ColorConstant.MAIN_THEME_COLOR,
      child: SafeArea(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverToBoxAdapter(
                child: GestureDetector(
              child: Container(
                margin: const EdgeInsets.all(15),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      width: 35,
                      margin: const EdgeInsets.all(5),
                      child: Image(
                        image:
                            AssetImage('resource/images/ic_account_avatar.png'),
                      ),
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          child: Text('请登录',
                            style: TextStyle(
                              color: ColorConstant.TEXT_GRAY_COLOR,
                              fontSize: 30,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Container(
                          child: Text('欢迎',
                            style: TextStyle(
                              color: ColorConstant.TEXT_GRAY_COLOR,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              onTap: () {
                print('点击了');
              },
            )),
            // 当列表项高度固定时,使用 SliverFixedExtendList 比 SliverList 具有更高的性能
            SliverFixedExtentList(
              delegate: SliverChildBuilderDelegate(_buildListItem,
                  childCount:
                      (this.listItems.length > 0 ? this.listItems.length : 0)),
              itemExtent: 60.0,
            ),
          ],
        ),
      ),
    );
  }

  /// 列表项
  Widget _buildListItem(BuildContext context, int index) {
    return StaticListItem(
      entity: this.listItems[index],
      callBack: (context, entity) {
      },
    );
  }

  _initData() {
    this.listItems.add(
      StaticListEntity(
        icon: 'resource/images/ic_invite.png',
        title: '邀请返佣',
        router: '',
        webUrl: '',
      ),
    );
    this.listItems.add(
      StaticListEntity(
        icon: 'resource/images/ic_account_verify.png',
        title: '身份认证',
        router: '',
      ),
    );
    this.listItems.add(
      StaticListEntity(
        icon: 'resource/images/ic_account_safe_setting.png',
        title: '安全设置',
        router: '',
      ),
    );
    this.listItems.add(
      StaticListEntity(
        icon: 'resource/images/ic_account_msg.png',
        title: '系统消息',
        router: RouterConstants.MESSAGE_CENTER_PAGE,
        isShowBadge: true,
      ),
    );
    this.listItems.add(
      StaticListEntity(
        icon: 'resource/images/ic_account_about_us.png',
        title: '关于我们',
        router: RouterConstants.ABOUT_US_PAGE,
      ),
    );
    this.listItems.add(
      StaticListEntity(
        icon: 'resource/images/ic_account_setting.png',
        title: '设置',
        router: RouterConstants.SETTING_PAGE,
      ),
    );
  }
}

GridView

这个是网格组件,类似于iOS中的CollectionView

class GridViewApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '网格组件',
      home: Scaffold(
        appBar: AppBar(title: Text('网格组件'),),
        body: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,      //列数
            crossAxisSpacing: 2.0,    //间距
            mainAxisSpacing: 2.0,   //上下间距
            childAspectRatio: 0.7,   //宽高比
          ),
          children: <Widget>[
             Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),
             Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
             Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
             Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
             Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
             Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
             Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
             Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
             Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),
          ],
        ),
      ),
    );
  }
}

Flutter中还有很多其他类似的组件,我也是刚开始使用,还要继续探索~

评论已关闭。