Flutter 使用 Spread (...) 减少代码行

Spread (...)展开运算符是一种有用且快速的语法，用于将项添加到数组、组合数组。

但是今天我们将学习如何在 UI 代码中使用扩展运算符 (...) 来减少代码行。

  1. 基本方法

基本方法

正如您在上面的代码中看到的，我们有一列包含一个 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.isAndroidPlatform.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​​ 查看速度是否正常