Dart 的 collection if 和 collection for
Published in
8 min readDec 18, 2023
Dart 提供特別的 collection if 和 collection for 語法，讓我們在 list、map 和 set 裡使用 if 和 for 彈性地建立資料，而且在開發 Flutter App 時也能運用此語法方便地設定 Row、Column、ListView 的內容。
以下讓我們一步步認識 collection if 和 collection for 的語法和應用。
collection if
- 在 if 條件成立時加入一個成員。
在 [ ] 裡用 if 判斷 character 是狐狸還是玫瑰，加入不同的 quote。
void main() {
var character = '狐狸';
var quoteCollection = [
'只有用心才能看得清楚',
if (character == '狐狸') '你必須永遠為你所馴服的負責',
if (character == '玫瑰') '你為你的玫瑰花費的時間使得你的玫瑰變得如此重要'
];
print(quoteCollection);
}結果。
[只有用心才能看得清楚, 你必須永遠為你所馴服的負責]值得注意的，collection if 雖然跟 if 語法很像，但是有一些小地方不同，比方 collection if 之後不會接 { }。
- 搭配 else。
void main() {
var character = '玫瑰';
var quoteCollection = [
'只有用心才能看得清楚',
if (character == '狐狸')
'你必須永遠為你所馴服的負責'
else
'你為你的玫瑰花費的時間使得你的玫瑰變得如此重要',
];
print(quoteCollection);
}結果。
[只有用心才能看得清楚, 你為你的玫瑰花費的時間使得你的玫瑰變得如此重要]- 在 if 條件成立時加入多個成員。
在條件成立時利用 spread operator … 將 …[ ] 裡的成員一個個加入 quoteCollection。
void main() {
var character = '狐狸';
var quoteCollection = [
'只有用心才能看得清楚',
if (character == '狐狸') ...[
'你必須永遠為你所馴服的負責',
'只有用心才能看得真切'
],
if (character == '玫瑰') ...[
'你為你的玫瑰花費的時間使得你的玫瑰變得如此重要',
'愛不在於彼此凝視，而在於共同朝著同一方向看'
]
];
print(quoteCollection);
}結果。
[只有用心才能看得清楚, 你必須永遠為你所馴服的負責, 只有用心才能看得真切]值得注意的，一定要記得加 …，不然像以下的程式會變成 nested list。
void main() {
var character = '狐狸';
var quoteCollection = [
'只有用心才能看得清楚',
if (character == '狐狸') [
'你必須永遠為你所馴服的負責',
'只有用心才能看得真切'
],
if (character == '玫瑰') [
'你為你的玫瑰花費的時間使得你的玫瑰變得如此重要',
'愛不在於彼此凝視，而在於共同朝著同一方向看'
]
];
print(quoteCollection);
}結果。
[只有用心才能看得清楚, [你必須永遠為你所馴服的負責, 只有用心才能看得真切]]- 搭配 Flutter App。
在 Column 的 children 判斷是否為工作日顯示不同的內容。
class HomeScreen extends StatelessWidget {
HomeScreen({super.key});
final bool isWeekday = DateTime.now().weekday < 6;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('今天是${isWeekday ? "工作日" : "週末"}'),
if (isWeekday) const Text('上班寫程式'),
if (!isWeekday) const Text('放假寫程式'),
],
),
),
);
}
}
collection for
- 快速產生 1 ~ 10 的 list。
在 [ ] 裡用 for 產生數字 1 到 10。
void main() {
var numbersList = [for (var i = 1; i <= 10; i++) i];
print(numbersList);
}結果。
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]在 100 和 200 之間用 for 加入 1 到 10。
void main() {
var numbersList = [100, for (var i = 1; i <= 10; i++) i, 200];
print(numbersList);
}結果。
[100, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 200]- 在 for 裡加入條件判斷。
只加入偶數。
void main() {
var numbersList = [
for (var i = 1; i <= 10; i++)
if (i % 2 == 0) i
];
print(numbersList);
}結果。
[2, 4, 6, 8, 10]- 搭配 for in。
void main() {
var numbersList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var doubledNumbersList = [for (var number in numbersList) number * 2];
print(doubledNumbersList);
}由於 number 不會變，var number in numbersList 也可以改成 final number in numbersList。
void main() {
var numbersList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var doubledNumbersList = [for (final number in numbersList) number * 2];
print(doubledNumbersList);
}結果。
[2, 4, 6, 8, 10, 12, 14, 16, 18, 20]- 搭配 Flutter App。
在 Column 的 children 裡使用 for ，從 names 產生 Text 的 list。
class HomeScreen extends StatelessWidget {
HomeScreen({super.key});
final names = ['小王子', '玫瑰', '狐狸', '飛行員'];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [for (final name in names) Text(name)],
),
),
);
}
}
差別待遇，讓最可愛的主角小王子變大。
class HomeScreen extends StatelessWidget {
HomeScreen({super.key});
final names = ['小王子', '玫瑰', '狐狸', '飛行員'];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
for (final name in names)
if (name == '小王子')
Text(
name,
style: const TextStyle(fontSize: 30),
)
else
Text(
name,
style: const TextStyle(fontSize: 20),
)
],
),
),
);
}
}
