首页 > 其他 > 详细

9-13活动入口实现

时间:2020-01-18 20:44:07      阅读:80      评论:0      收藏:0      [点我收藏+]

活动入口。首先分为上下两行,每一行有5个入口。每个入口分为商量两个部分,上面是图标下面是文字。
技术分享图片

开始

新建sub_nav.dart
技术分享图片

技术分享图片
Contianer的高度去掉,
技术分享图片

四个角都是圆角的话,有一个简单的方式设置。
技术分享图片

可灵活配置的展现

每行虽然现实了5个,但是如果后端返回的数据 自由4个 或者 6个等等。
不管有多少数据,我们只显示最多两行。
计算出每行展示的数量
技术分享图片

第一行和第二行,第二行用padding包裹,距离顶部10
技术分享图片
这样就将item数组分成了上下两个部分!!!!!!!
技术分享图片

技术分享图片

首页调用subNav

技术分享图片

技术分享图片
loadData里面进行初始化
技术分享图片
调用subNav
技术分享图片
缺点,并没有上下对齐。
技术分享图片

解决上下不对齐的问题

对样式进行一些调整。
首先让item进行平分布局的大小。
技术分享图片
外层嵌套一个Expanded
技术分享图片
技术分享图片

技术分享图片
点击自由行,进行了跳转
技术分享图片

回顾

最多显示两行,所以除以2.计算出每行显示的数量
技术分享图片
然后将这个数组拆分成两部分
技术分享图片
 

结束

 

9-13活动入口实现

原文:https://www.cnblogs.com/wangjunwei/p/12210002.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!