Flutter 使用 Spread (...) 减少代码行
Spread (...)展开运算符是一种有用且快速的语法,用于将项添加到数组、组合数组。
但是今天我们将学习如何在 UI 代码中使用扩展运算符 (...) 来减少代码行。
- 基本方法
基本方法
正如您在上面的代码中看到的,我们有一列包含一个 Button 和 5 个 ListTile。
现在我们的任务是减少这种重复的线条。
2.嵌套列(一般方法)
通常我们遇到过这样的事情,我们在 Column 中使用一个 Column 并将一个 List 传递给它的孩子。
这很好,但我们可以从 90% 到 100%。
嵌套列
3.传播 (…) 方法
Spread o perator 使用起来很简单,只需添加 ... 是开始,您就可以开始了。
但是你我在想为什么它没有抛出错误。这很简单,因为 Column Contains a List 并且可以使用扩展运算符将现有 List 添加到它接受并理解的另一个 List 中。
使用扩展运算符
4.更多使用Spread
您会想从 90% 到 100% 有什么意义,因为很少有新开发人员会对这种语法感到困惑。
因此,让我们检查下面的示例,其中我在具有扩展的列中使用 if 条件,它有条件地呈现小部件,这比使用带有三元运算符的嵌套列更好
Spread Operator with If Condition
That’s it for this Article but there is no limitation of using this teeny-tiny operator in numerous places.
这就是本文的内容,但在许多地方使用这个极小的运算符没有限制。
最后给大家带来一些彩蛋
平台相关的判断
只关心是否是iOS和Android的情况下不需要依赖context
,优先使用Platform
Platform.isAndroid Platform.isIOS 复制代码
需要详细知道具体哪个平台才使用TargetPlatform
这个API的缺点是需要依赖context
这个参数
final platform = Theme.of(context).platform; if (platform == TargetPlatform.android) { ... } else if (platform == TargetPlatform.iOS) { ... } 复制代码
ScrollView 滑动隐藏键盘
使用ScrollView的keyboardDismissBehavior
属性
ListView( keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag ) 复制代码
回调写法
a.无参数回调
VoidCallback
b.有一个参数回调
ValueChanged
c.参数大于一个
可以通过typedef
自定义一个函数
下面是Example用法
final VoidCallback onPressed; final ValueChanged<T> onSelectHandler; typedef ImageSwiperOnTap = void Function(int index, List<String> imgUrls); 复制代码
flutter pub get is stuck
可以通过切换flutter镜像到中文站点来解决
使用系统shell,请编辑
使用oh_my_zsh, 需要编辑.zshrc
export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 复制代码
保存文件后,关闭,下次重新打开终端生效
再执行flutter pub get
查看速度是否正常