需求是横向的标签
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, //收缩,让元素宽度自适应
),
),
],
),
),
)),