導航欄

appBar: AppBar()

title: const Text('搜索')  //標題

backgroundColor: Colors.blue   //背景顏色

centerTitle: true //標題居中

leading?屬性

作用：
放置在應用欄左側的控件，通常是一個圖標按鈕，用于導航或打開菜單。

AppBar(leading: IconButton(icon: Icon(Icons.menu),onPressed: () {Scaffold.of(context).openDrawer(); // 打開側邊欄},),
)

actions?屬性

作用：
放置在應用欄右側的一組控件，通常是圖標按鈕，用于展示常用操作。

AppBar(actions: [IconButton(icon: Icon(Icons.search),onPressed: () {// 打開搜索功能},),IconButton(icon: Icon(Icons.more_vert),onPressed: () {// 打開更多選項菜單},),],
)

123

---

body

居中

Scaffold(appBar: AppBar(title: Text('標題')),body: Center(child: Text('這是主要內容'),),
);

垂直布局（Column）

• MainAxisAlignment.start：子組件在主軸方向上對齊到起始位置。

• MainAxisAlignment.end：子組件在主軸方向上對齊到結束位置。

• MainAxisAlignment.spaceAround：子組件之間有等間距，但第一個和最后一個子組件與容器邊緣的間距是其他間距的一半。

• MainAxisAlignment.spaceBetween：子組件之間有等間距，但第一個和最后一個子組件分別對齊到容器的起始和結束位置。

• MainAxisAlignment.spaceEvenly：子組件之間和子組件與容器邊緣的間距都相等。

左邊

Scaffold(body: Column(mainAxisAlignment: MainAxisAlignment.center,   //mainAxisAlignment：這是 Row 或 Column 布局組件中的一個屬性，用來指定子組件在主軸方向上的對齊方式。children: [Text('標題'),SizedBox(height: 16),ElevatedButton(onPressed: () {},child: Text('按鈕'),),],),
);

居中

body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('標題'),SizedBox(height: 66),ElevatedButton(onPressed: () {},child: Text('按鈕'),),],),
)

123

SizedBox

Column(children: [Text('標題'),SizedBox(height: 16),Text('內容'),],
)

效果：Text('標題') 和 Text('內容') 之間會有一個高度為 16 像素的垂直間距。

水平布局（Row）

Scaffold(body: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Icon(Icons.star, size: 48),Icon(Icons.star, size: 48),Icon(Icons.star, size: 48),],),
);

居中

return Scaffold(appBar: AppBar(title: const Text('個人中心')),body: Center(child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Icon(Icons.star, size: 48),Icon(Icons.star, size: 48),Icon(Icons.star, size: 48),],)),);

容器

Scaffold(body: Container(padding: EdgeInsets.all(16), //意思就是容器內 空白16個像素點 空格 設置內邊距為上下左右各16像素child: Column(crossAxisAlignment: CrossAxisAlignment.start, // 子組件在水平方向上對齊到起始位置children: [Text('標題', style: TextStyle(fontSize: 24)), // 顯示標題，字體大小為24SizedBox(height: 16), // 添加一個高度為16像素的垂直間距Expanded( // 讓子組件（ListView）占據剩余空間child: ListView(children: [ListTile(title: Text('項目 1')), // 列表項1ListTile(title: Text('項目 2')), // 列表項2ListTile(title: Text('項目 3')), // 列表項3],),),],),),
);

123