SizedBox
SizeBox是產生間隔。
Row SizedBox(width)
Row 之間的間隔，SizedBox要設定 width。
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
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
const MainPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
color: Colors.yellow,
child: Row(
children: [
Container(
width: 100,
height: 100,
color: Colors.blue,
),
SizedBox(
width: 20,
),
Container(
width: 100,
height: 100,
color: Colors.green,
),
SizedBox(
width: 20,
),
Container(
width: 100,
height: 100,
color: Colors.red,
),
],
),
)));
}
}
Column SizedBox(height)
Column 之間的間隔，SizedBox要設定 height
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
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
const MainPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
color: Colors.yellow,
child: Column(
children: [
Container(
width: 100,
height: 100,
color: Colors.blue,
),
SizedBox(
height: 20,
),
Container(
width: 100,
height: 100,
color: Colors.green,
),
SizedBox(
height: 20,
),
Container(
width: 100,
height: 100,
color: Colors.red,
),
],
),
)));
}
}