前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter ListView和GridView嵌套

Flutter ListView和GridView嵌套

作者头像
赵哥窟
发布2021-04-25 14:33:54
2.9K0
发布2021-04-25 14:33:54
举报
文章被收录于专栏:日常技术分享日常技术分享

Screenshot_1619146087.png

要实现如图的效果

总体结构

整体结构是一个ListView,LiseView里面嵌套一个Container(热门歌单) ListView(顶部3个横着的Item)GridView(九宫格Item)

核心代码
代码语言:javascript
复制
Widget _bodyWidget(HotSongSheetsState state, Dispatch dispatch,ViewService viewService) {
  return  WillPopScope(
    child: Scaffold(
      backgroundColor: Global.pageBackgroundColor,
      appBar: AppBarWidget('', viewService.context),
      body: ListView(
        children: [
          Container(
            height: ScreenAdaper.width2px(40),
            alignment: Alignment.topLeft,
            margin: EdgeInsets.only(left: 16),
            child: BaseText.baseText('热门歌单', 24, '111E36'),
          ),
          Container(
            height: ScreenAdaper.width2px(15),
          ),
          Container(
           child:  _songSheetListWidget(state,dispatch),
         ),
        ],
      ),
    ),
  );

}
代码语言:javascript
复制
Widget _songSheetListWidget(HotSongSheetsState state, Dispatch dispatch){
  if(state.hotSongSheetList.list.length <= 3){
    return _getListView(state,dispatch);
  }else{
    return Column(
      children: [
        _getListView(state,dispatch),
        _gridView(state,dispatch),
      ],
    );
  }
}
ListView
代码语言:javascript
复制
Widget _getListView(HotSongSheetsState state, Dispatch dispatch){
  return ListView.builder(
    shrinkWrap: true, //解决无线高度问题
    physics: new NeverScrollableScrollPhysics(), //禁用滑动事件
    itemBuilder: (context, index) {
      return HotSongSheetListItem(
        data: state.hotSongSheetList.list[index],
        dispatch: dispatch,
      );
    },
    itemCount: state.hotSongSheetList.list.length > 3?3:state.hotSongSheetList.list.length,
  );
}
GridView
代码语言:javascript
复制
Widget _gridView(HotSongSheetsState state, Dispatch dispatch) {
  return GridView.builder(
      shrinkWrap: true,
      //解决无线高度问题
      physics: new NeverScrollableScrollPhysics(),
      //禁用滑动事件
      scrollDirection: Axis.vertical,
      // 水平滚动
      controller: state.scrollController,
      padding: EdgeInsets.only(left: 16.0, top: 0, right: 16),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, //每行显示3列
        childAspectRatio: 110 / 150, //显示区域宽高相等
        mainAxisSpacing: 6.0, //每行的间距
        crossAxisSpacing: 6.0, //每列的间距
      ),
      itemCount: state.hotSongSheetList.list.length,
      itemBuilder: (context, index) {
        return HotSongSheetItem(
          dispatch: dispatch,
          data: state.hotSongSheetList.list[index],
        );
      });
}

其他部分代码就不粘贴出来了。代码很简单一看都明白

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 总体结构
  • 核心代码
  • ListView
    • GridView
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档