flutter 瀑布式布局

氤氲息

已于 2022-12-30 16:59:57 修改

阅读量549

点赞数

分类专栏： flutter 文章标签： flutter android

于 2022-12-30 15:01:00 首次发布

本文链接：https://blog.csdn.net/weixin_44911775/article/details/128495867

版权

flutter 专栏收录该内容

141 篇文章 1 订阅

订阅专栏

需求是横向的标签请添加图片描述

flutter_staggered_grid_view: 0.6.2

外层用SingleChildScrollView，如果不用的话会有可能滑不到最右边（标签太长了）

SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: ConstrainedBox(//用一个最小宽度的布局，宽度是最宽，让row最宽，row里面的container就可以居左了
                constraints: BoxConstraints(minWidth: Global.screenWidth),
                child: Container(
                  alignment: Alignment.centerLeft,//居左
                  color: Colors.transparent,
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        alignment: Alignment.centerLeft,
                        margin: const EdgeInsets.only(
                            left: 15, right: 15, top: 17, bottom: 20),
                        height: 83,
                        color: Colors.transparent,
                        child: MasonryGridView.count(
                          scrollDirection: Axis.horizontal,
                          // 展示几列
                          crossAxisCount: 2,
                          // 元素总个数
                          itemCount: hotTopicList.length,
                          // 单个子元素
                          itemBuilder: (BuildContext context, int index) =>
                              GestureDetector(
                            onTap: () {
                              // String topicTitle='';
                              // if(hotTopicList[index].title!=null){
                              //   if(hotTopicList[index].title!.length>1){
                              //     topicTitle=hotTopicList[index].title!.substring(1,hotTopicList[index].title!.length);
                              //   }
                              // }
                              LogEvent.logEvent(
                                  name: EventKey.KEY_TOPIC_HOT,
                                  parameters: {
                                    'topic':
                                        '${hotTopicList[index].titleId ?? 0}',
                                    'user_id': Global.userId
                                  });
                              //进话题页上报话题和用户ID
                              LogEvent.logEvent(
                                  name: EventKey.KEY_TOPIC_IN,
                                  parameters: {
                                    'topic':
                                        '${hotTopicList[index].titleId ?? 0}',
                                    'user_id': Global.userId,
                                    'source':2
                                  });
                              //停掉发布动态按钮的动画
                              EventBusUtil.fire(
                                  SendDynamicAnimationEvent(false));
                              MyRouter.pushMyMap(
                                  context, MyRouter.momentTopicList, {
                                'topicId': hotTopicList[index].titleId ?? 0,
                                'topicTitle': hotTopicList[index].title ?? '',
                                'aboutMoment':
                                    hotTopicList[index].aboutMoment ?? 0,
                                'aboutUser': hotTopicList[index].aboutUser ?? 0
                              }).then((value) =>
                                  //开启发布动态按钮的动画
                                  EventBusUtil.fire(
                                      SendDynamicAnimationEvent(true)));
                            },
                            child: Container(
                              alignment: Alignment.center,
                              // height: 26,
                              margin: const EdgeInsets.only(right: 0),
                              padding: const EdgeInsets.only(
                                  left: 10, right: 10, bottom: 1),
                              decoration: BoxDecoration(
                                  color: const Color(0xFFF8F8F8),
                                  borderRadius: BorderRadius.circular(50),
                                  border: Border.all(
                                      width: 1.0,
                                      color: const Color(0xFFE7E7E7))),
                              child: Text(
                                '# ' + (hotTopicList[index].title ?? ''),
                                style: const TextStyle(fontSize: 14),
                              ),
                            ),
                          ),
                          // 纵向元素间距
                          mainAxisSpacing: 10,
                          // 横向元素间距
                          crossAxisSpacing: 20,
                          //本身不滚动，让外面的singlescrollview来滚动
                          physics: const NeverScrollableScrollPhysics(),
                          shrinkWrap: true, //收缩，让元素宽度自适应
                        ),
                      ),
                    ],
                  ),
                ),
              )),