Flutter 中的点语法简写 (Dot shorthands)
学习如何使用 Dart 的点语法简写来编写更简洁、易读的 Flutter 代码。
点语法简写 (dot shorthands) 功能允许你在访问静态成员、构造函数或枚举值时省略显式类型，前提是编译器能够从周围的上下文中推断出该类型。
为什么点语法简写很重要
#在 Flutter 中构建布局通常涉及深度嵌套的 Widget 树。以往，这意味着需要为颜色、排版和对齐方式等属性反复输入显式的类名和枚举名。点语法简写减少了这些样板代码，使你的代码更易于阅读且编写速度更快。
以下是构建简单的 Container 的对比示例
未使用点语法简写
#
dart
Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Hello World',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
);
使用点语法简写
#
dart
Container(
alignment: .center, // Instead of Alignment.center,
padding: const .all(16.0), // Instead of EdgeInsets.all(16.0)
child: Column(
mainAxisAlignment: .center, // Instead of MainAxisAlignment.center
crossAxisAlignment: .start, // Instead of CrossAxisAlignment.start
children: [
Text(
'Hello World',
style: TextStyle(
fontWeight: .bold, // Instead of FontWeight.bold
),
),
],
),
);
在哪里使用点语法简写
#点语法简写适用于任何 Dart 编译器具有明确“上下文类型”的地方，这意味着它确切地知道所期望的类型。在 Flutter 中，这几乎存在于 Widget 属性列表的任何地方。
Flutter 中点语法简写最常见的应用场景是：
-
枚举：
MainAxisAlignment、CrossAxisAlignment、BoxFit、TextDirection。 -
静态属性和方法：
FontWeight（如.bold等常量）。 -
构造函数：
EdgeInsets.all()、BorderRadius.circular()。
示例：枚举
#当属性期望一个 enum（例如 mainAxisAlignment）时，你可以省略枚举的名称，只需提供前面带有圆点 (.) 的值即可。
dart
Row(
mainAxisAlignment: .spaceEvenly, // Infers MainAxisAlignment.spaceEvenly
children: [ /* ... */ ],
)
示例：静态属性
#当上下文类型正是定义该属性的类时，静态属性同样适用。一个常见的例子是使用 FontWeight 进行文本样式设置。
dart
Text(
'Feature highlights',
style: TextStyle(
fontWeight: .bold, // Infers FontWeight.bold
),
)
示例：构造函数
#你也可以将点语法简写用于命名构造函数。许多 Flutter 布局属性接受像 EdgeInsetsGeometry 这样的基类。为了支持点语法简写，Flutter 在这些基类中添加了重定向构造函数，指向适当的子类。
dart
Padding(
padding: .symmetric(horizontal: 16.0, vertical: 8.0), // Infers EdgeInsetsGeometry.symmetric
child: Text('Spaced out text'),
)
你甚至可以使用 .new 来调用未命名的构造函数，尽管这在标准的 Widget 树中不太常见。
dart
class _MyState extends State<MyWidget> {
final ScrollController _scrollController = .new(); // Infers ScrollController()
// ...
}