Flutter使用Spread减少代码行

简介: Flutter 使用 Spread (...) 减少代码行Spread (...)展开运算符是一种有用且快速的语法,用于将项添加到数组、组合数组。

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

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

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

  1. 基本方法

image

基本方法

正如您在上面的代码中看到的,我们有一列包含一个 Button 和 5 个 ListTile。

现在我们的任务是减少这种重复的线条。

2.嵌套列(一般方法)

通常我们遇到过这样的事情,我们在 Column 中使用一个 Column 并将一个 List 传递给它的孩子。

这很好,但我们可以从 90% 到 100%。

image

嵌套列

3.传播 (…) 方法

Spread o perator 使用起来很简单,只需添加 ... 是开始,您就可以开始了。

但是你我在想为什么它没有抛出错误。这很简单,因为 Column Contains a List 并且可以使用扩展运算符将现有 List 添加到它接受并理解的另一个 List 中。

image

使用扩展运算符

4.更多使用Spread

您会想从 90% 到 100% 有什么意义,因为很少有新开发人员会对这种语法感到困惑。

因此,让我们检查下面的示例,其中我在具有扩展的列中使用 if 条件,它有条件地呈现小部件,这比使用带有三元运算符的嵌套列更好

image

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 查看速度是否正常



相关文章
|
Dart Linux API
Flutter 上使用 C/C++ 代码(上)
Flutter 上使用 C/C++ 代码(上)
3045 0
Flutter 上使用 C/C++ 代码(上)
|
1月前
|
存储 开发框架 开发者
flutter:代码存储&基本组件 (五)
本文档介绍了Flutter中的一些基本组件和代码示例,包括代码存储、基本组件如AppBar的简单使用、可滑动切换的标签栏、TextField的多种用法(如简单使用、登录页面、文本控制器的监听与使用、修饰等),以及如何实现点击空白区域隐藏键盘等功能。通过这些示例,开发者可以快速掌握在Flutter应用中实现常见UI元素的方法。
|
1月前
|
IDE 调度 开发工具
鸿蒙Flutter实战:08-如何调试代码
本文介绍了鸿蒙Flutter项目的开发环境搭建、配置、日志查看及调试方法。首先按照指南搭建开发环境,安装IDE插件;接着配置vscode的launch.json文件;通过IDE调试控制台或命令行查看日志;提供两种调试Flutter的方式,包括IDE直接运行和使用DevEco;最后介绍ArkTs和Webview的调试方法。
52 0
|
1月前
|
小程序 Java Android开发
flutter:注意点&快速代码&链接虚拟机&改配置 (一)
这段内容主要介绍了Flutter开发中的一些注意事项和快速代码示例。首先,在构建Flutter小程序时,`setState`方法只能在`StatefulWidget`和`State`类中使用,且初始化数据应放在`initState`方法内。接着,通过一个简单的示例展示了如何构建一个包含`Scaffold`的基本Flutter应用,并指出了在`MaterialApp`中移除调试横幅的方法。此外,文档还提供了关于搭建Flutter开发环境、配置虚拟机、解决安装错误以及配置相关文件(如`build.gradle`)的指导信息。
|
3月前
|
Dart
Flutter之ExpansionTile实现以代码方式码折叠、展开
Flutter之ExpansionTile实现以代码方式码折叠、展开
127 4
|
3月前
|
Dart
Flutter笔记:手动配置VSCode中Dart代码自动格式化
Flutter笔记:手动配置VSCode中Dart代码自动格式化
478 5
|
6月前
|
Dart 安全
简化代码、提高效率:Dart和Flutter开发小技巧
在日常开发中,我们常常会使用一些常用的技巧或语法糖,以简化代码、提高开发效率。本文将分享一些在Dart和Flutter中常用的小贴士,帮助你更轻松地编写优雅高效的代码。
简化代码、提高效率:Dart和Flutter开发小技巧
|
6月前
|
Dart 前端开发 Android开发
【Flutter前端技术开发专栏】Flutter中的平台特定代码实现
【4月更文挑战第30天】Flutter旨在实现跨平台移动应用开发,但有时需针对iOS或Android编写特定代码。平台通道是关键机制,允许Dart代码与原生代码交互。通过`MethodChannel`等实现跨平台通信,然后在iOS和Android上响应调用。条件编译则在编译时决定特定平台代码。本文展示了如何在Flutter中处理平台特定功能,包括示例代码和总结。
155 0
【Flutter前端技术开发专栏】Flutter中的平台特定代码实现
|
6月前
|
Dart 前端开发 Android开发
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
【4月更文挑战第30天】本文探讨了如何在Flutter中集成和交互原生代码,以利用特定平台的API和库。当需要访问如蓝牙、特定支付SDK或复杂动画时,集成原生代码能提升效率和性能。集成方法包括:使用Platform Channel进行通信,借助现有Flutter插件,以及Android和iOS的Embedding。文中通过一个电池信息获取的例子展示了如何使用`MethodChannel`在Dart和原生代码间传递调用。这些技术使开发者能充分利用原生功能,加速开发进程。
110 0
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
|
前端开发 JavaScript Android开发
React Native 和 Flutter对比,包含代码实例
@[TOC](目录) React Native 和 Flutter 都是流行的跨平台移动应用开发框架。虽然它们在很多方面都有相似之处,但它们也有一些不同之处。在本文中,我们将详细比较这两个框架,讨论它们的优缺点、应用场景、性能以及包含的代码。 # 1. 框架概述 React Native 是由 Facebook 开发的一个开源框架,它允许开发者使用 JavaScript 和 React 来创建原生移动应用。React Native 可以用于开发 iOS、Android 和 Web 应用。它使用 JavaScript 的生态系统和工具,如 Babel、ESLint 和 React 工具链,使得开
187 0
下一篇
无影云桌面