Send Msg
要傳的訊息變數前面要加final，類型可以是可選參數?，也可以使用required。
可選參數是參數可填可不填，但required，參數一定要填。
可選參數?語法
final String? message;
const Child({Key? key, this.message}) : super(key: key);
required 必要參數，必要參數就類型後面不用使用問號?。
final String message;
const Child({Key? key, required this.message}) : super(key: key);
無狀態子組件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: Center(
child: Child(message: 'Hello World'),
),
),
));
}
class Child extends StatelessWidget {
final String? message;
const Child({Key? key, this.message}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Text("$message"),
);
}
}
有狀態子組件
- 繼承 StatefulWidget 對外類別處理傳遞過來的參數。
- 繼承 State 內部類別使用「widget.訊息變數」取得變數。
語法
${widget.message}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: Center(
child: Child(message: 'Hello World'),
),
),
));
}
class Child extends StatefulWidget {
final String? message;
const Child({Key? key, this.message}) : super(key: key);
@override
State<Child> createState() => _ChildState();
}
class _ChildState extends State<Child> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
child: Text("${widget.message}"),
);
}
}
有狀態傳送Lambda給子組件
- MainPage 為有狀態
- Child 為有狀態
在子組件宣告Lambda，Lambda類型是Function，要接收參數。
final Function(參數) 函式名稱;
final Function(int index) delFood;
將Lambda加入到建構子參數。
1
2
3
4
5
6
const Child(
{Key? key,
required this.food,
required this.index,
required this.delFood}) // 函式名稱作為參數
: super(key: key);
呼叫Lambda
widget.函式名稱(參數);
widget.delFood(widget.index);
定義Lambda
(參數) {
要做的事
}
(int index) {
list.removeAt(index);
setState(() {}); // setState 更新變數更新介面
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatefulWidget {
MainPage({Key? key}) : super(key: key);
@override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
List<String> list = ["牛肉麵", "魯肉飯", "排骨飯", "水餃"];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: GridView.count(
crossAxisCount: 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
children: List.generate(
list.length,
(index) => Child(
food: list[index],
index: index,
// 參數為Lambda
delFood: (int index) {
// 刪除
list.removeAt(index);
// 更新變數、更新介面
setState(() {});
},
))),
),
),
);
}
}
class Child extends StatefulWidget {
final String food;
final int index;
// 宣告Lambda
final Function(int index) delFood;
const Child(
{Key? key,
required this.food,
required this.index,
required this.delFood}) // Lambda作為建構子參數
: super(key: key);
@override
State<Child> createState() => _ChildState();
}
class _ChildState extends State<Child> {
@override
Widget build(BuildContext context) {
return Stack(
// 超重要，把icon放在最右上角
alignment: Alignment.topRight,
children: [
Container(
color: Colors.blue,
alignment: Alignment.center,
child: Text("${widget.food}"),
),
IconButton(
icon: Icon(Icons.delete),
onPressed: () {
// 呼叫Lambda，並傳入參數
widget.delFood(widget.index);
},
)
]);
}
}