SingleChildScrollView
SingleChildScrollView 包住一個子元件(只有一個child)，讓子元件可以滾動畫面。
- 一次性建立所有子元件，不會隨著下滑而逐漸建立子元件。
- 因為只能一個子元件，所以會使用可以包裏住多個列或欄的子元件的佈局組件，如: Column, Row。
- 預設滾動方向(scrollDirection)是垂直(Axis.vertical)，也可以設成水平(Axis.horizontal)
包住一個子元件
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
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> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
child: Column(
children: List.generate(10, (index) {
return Container(
margin: EdgeInsets.only(top: 10.0),
width: double.infinity,
color: Colors.blue,
height: 100,
alignment: Alignment.center,
child: Text("item $index"),
);
}),
),
)));
}
}