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

相关推荐
程序员清洒2 小时前
Flutter for OpenHarmony:GridView — 网格布局实现
android·前端·学习·flutter·华为
嘴贱欠吻!2 小时前
Flutter鸿蒙开发指南(七):轮播图搜索框和导航栏
算法·flutter·图搜索算法
Miguo94well3 小时前
Flutter框架跨平台鸿蒙开发——地理知识速记APP的开发流程
flutter·华为·harmonyos·鸿蒙
LawrenceLan3 小时前
Flutter 零基础入门(二十六):StatefulWidget 与状态更新 setState
开发语言·前端·flutter·dart
running up that hill3 小时前
Android的线性布局
android
m0_748229993 小时前
Laravel9.x核心特性全解析
android
2401_892000523 小时前
Flutter for OpenHarmony 猫咪管家App实战 - 添加提醒实现
前端·javascript·flutter
时光慢煮3 小时前
【Flutter × OpenHarmony】跨端开发实现全局Toast提示卡片
flutter·华为·开源·openharmony
IT陈图图4 小时前
Flutter × OpenHarmony 混合布局实战:在一个容器中优雅组合列表与网格
flutter·鸿蒙·openharmony
2603_949462105 小时前
Flutter for OpenHarmony社团管理App实战:意见反馈实现
android·flutter