Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow

用Android原生实现流式布局【实现例如app的很多标签】需要自定义View继承自ViewGroup,然后代码量也不小。

相关自定义View实现流式布局,请参考这位老兄的博客:

https://blog.csdn.net/u013107751/article/details/81701606

或者慕课网上的android免费课程有一门课是专门实现自定义流式布局的。

而在Flutter中实现此效果却非常简单。


1.布局类Widget的介绍: 

布局类Widget都会包含一个或多个子widget,不同的布局类Widget对子widget排版(layout)方式 不同。Element树才是最终的绘制树,Element树是通过widget树来创建的(通 过 Widget.createElement() ),widget其实就是Element的配置数据。

Flutter中,根据 Widget是否需要包含子节点将Widget分为了三类,分别对应三种Element:

布局类widget
Widget 对应的Element 用途
LeafRenderObjectWidget LeafRenderObjectElement Widge
已标记关键词 清除标记
相关推荐
<p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <br /> </p> <p> <br /> </p> <p> 本套视频目标从UI分类开始讲起,结合网易新闻功能点实例讲解每一大类组件布局的使用。最后以一个完整的仿网易新闻的UI实战讲解,教会大家如何合理选择UI组件,并且使用组件快速实现我们的需求,完成一个完整的Flutter项目。 </p> <p> <br /> </p> <p> <br /> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/27286"></a><a href="https://edu.csdn.net/course/detail/26858">https://edu.csdn.net/course/detail/26858</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端:CSDN 学院APP(注意不是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有效观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <br /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:C马雯娟 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值