Flutter开发 -- 条件绘制

先水一篇,后面扩种这篇的内容。当然就不止是条件绘制了。

很多时候难免会出现一种情况,那就是屏幕显示的一个或者多个Widget和某些条件相关联。满足条件的显示出来,不满足的不显示。这就需要用到条件绘制。

用最常见的三元操作符 ?:

这个是最常见的,在Flutter是,在隔壁React也是。使用的非常普遍。

上面的代码是说,如果满足条件controller.hasSuchField('due date'),就显示一个Icon,否则什么都不显示。

或者

使用If-case或者switch表达式

if-case:

Switch表达式

使用一个匿名方法

根据value的值返回带有不同文本的Text。

用Builder

这是Flutter提供的实现复杂的绘制的工具。万能的builder在各种第三方的状态管理库里频繁出现。

现在看一个例子:

使用自定义方法

这个方式在Flutter里也会经常用到。不管是高情商代码抽象,还是低情商减少缩进。

以上大部分都可以用在child属性下。但是在Row,Column这样的children属性不一定适用。现在看看对children怎么实现条件绘制:

其实也是用了if表达式,或者类似于三元操作符。只是这里多了一个对Widget列表的操作。就是那个spread operator。让widget列表spread在children里。

相关推荐
河铃旅鹿4 小时前
Android开发-java版:SQLite数据库
android·数据库·笔记·学习·sqlite
旋律逍遥4 小时前
《Framework 开发》3、开发工具及命令行知识装备
android
啦啦9117144 小时前
安卓手机/平板/TV版 Rotation强制横屏显示工具!免ROOT可用!再推荐突破手机限制的3款神器
android·智能手机·电脑
消失的旧时光-19434 小时前
Flutter 组件:StatelessWidget vs StatefulWidget
flutter
天意__4 小时前
Flutter 聊天界面使用ListView的reverse:true,导致条目太少的时候会从下往上显示,导致顶部大片空白
flutter
汤面不加鱼丸5 小时前
flutter实践:混合app在部分android旧机型上显示异常
android·flutter
火柴就是我5 小时前
flutter 为什么大家说不能在initState 方法中调用dependOnInheritedWidgetOfExactType
flutter
_李小白6 小时前
【Android FrameWork】延伸阅读:ActivityManagerService启动Activity
android
用户41659673693556 小时前
Android 媒体库高效扫描器:基于协程与 `ContentObserver` 的 `FileScanner`
android
ajassi20006 小时前
开源 Objective-C IOS 应用开发(十四)传感器--陀螺仪和gps
ios·开源·objective-c