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里。

相关推荐
yuezhilangniao9 分钟前
FVM 与 Flutter 环境配置完全指南:从安装到日常使用
flutter
硫酸锌0125 分钟前
在手机上运行Python增量备份手机数据到PC电脑
android·windows·python
用户38034165882971 小时前
控制中心一键后台录音:我被自己的 Spike 骗了两次
ios·swift
hai_android1 小时前
子 View 被压小时,如何向父容器"告状"?——MEASURED_STATE_TOO_SMALL 向上传递机制
android·kotlin·android jetpack
Crazy_MT1 小时前
App 可能不再是入口:从 iOS 27 快捷指令看苹果的 AI Agent 野心
人工智能·ios·apple
Maple9961 小时前
Firebase iOS SDK 重大事故:一个 nil key 如何让全球 App 集体崩溃
ios
AFinalStone1 小时前
Android 7 多用户源码解析(七)系统服务的多用户感知处理
android·系统架构·多用户
怪奇云呼军1 小时前
从 ElevenLabs 看工具调用:闪电智能 Voice Agent 的企业集成验收设计
android·大数据·运维·服务器·网络·人工智能·kotlin
157092511343 小时前
Android 架构模式详解:从 MVC、MVP 到 MVVM
android·架构·mvc
gnip3 小时前
Flutter GetX 三件套开发规范(Skill)
前端·flutter