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()
// ...
}