一、容器Widget
1. Scaffold
Scaffold 作為頁面的腳手架，基礎區域包含頂部導航欄 appBar、主體內容區 body、側邊抽屜 drawer、懸浮按鈕 floatingActionButton、底部導航欄 bottomNavigationBar。
Scaffold(appBar: AppBar( // 頂部導航欄title: Text('首頁'),),body: Center( // 主體child: Text('頁面內容'),),drawer: Drawer( // 側邊欄child: ListView(children: [ListTile(title: Text('設置'))]),),floatingActionButton: FloatingActionButton( // 懸浮按鈕child: Icon(Icons.add),tooltip: '懸浮按鈕',onPressed: () {}, ),bottomNavigationBar: BottomNavigationBar( // 底部導航欄items: [BottomNavigationBarItem(icon: Icon(Icons.home), label: '首頁')],onTap: (index) {},),
)2. Container
Container 是一個多功能容器，它通過組合多種基礎功能（尺寸控制、邊距、裝飾、對齊等）簡化復雜 UI 的實現。
Container(width: 160, height: 40, // 寬高padding: EdgeInsets.symmetric(horizontal: 6), // 內邊距alignment: Alignment.topLeft, // 頂部|左側對齊color: Colors.white, // 背景色（與 decoration互斥）decoration: BoxDecoration( // 裝飾組合（背景色、圓角、陰影等）color: Colors.black12,borderRadius: BorderRadius.circular(6),),child: Text("容器") // 子組件
)二、布局Widget
1. Row
Row 用于水平排列子組件，通過主軸（水平方向）和交叉軸（垂直方向）控制子組件的排列方式。
Row(mainAxisAlignment: MainAxisAlignment.center, // 水平居中（默認值：start）crossAxisAlignment: CrossAxisAlignment.start, // 頂部對齊（默認值：center）textDirection: TextDirection.ltr, // 從左到右spacing: 6, // 間距children: [ // 子組件Expanded(flex: 1, child: Container(color: Colors.gray)), // 占1/3空間Expanded(flex: 2, child: Container(color: Colors.blue)), // 占2/3空間]
)2. Column
Column 用于垂直排列子組件，通過主軸（垂直方向）和交叉軸（水平方向）控制子組件的排列方式。
Column(mainAxisAlignment: MainAxisAlignment.center, // 垂直居中（默認值：start）crossAxisAlignment: CrossAxisAlignment.start, // 左側對齊（默認值：center）verticalDirection: VerticalDirection.down, // 從上到下spacing: 6, // 間隔children: [ // 子組件Expanded(flex: 2, child: Container(color: Colors.gray)), // 占2/3空間Expanded(flex: 1, child: Container(color: Colors.blue)), // 占1/3空間]
)3. Stack
Stack 用于實現??層疊布局??，允許子組件按繪制順序（從底部到頂部）堆疊在一起。
Stack(alignment: AlignmentDirectional.bottomStart, // 底部|左側對齊（默認值：topStart）textDirection: TextDirection.ltr, // 從左到右children: [Container(height: 44, color: Colors.blue), // 設置高度、背景色Positioned(top: 10, left: 10, width: 20, height: 20, child: Icon(Icons.star)), // 定位組件Positioned.fill(child: Container(color: Color(0x33000000))), // 半透明遮罩],
)4. Flex
Flex 用于創建??彈性布局??的核心組件，它通過主軸（main axis）和交叉軸（cross axis）控制子組件的排列方式。
Flex(direction: Axis.horizontal, // 水平方向spacing: 20, // 間距children: [ Flexible(flex: 1, child: Container(color: Colors.grey)), // 填充剩余空間Expanded(flex: 2, child: Container(color: Colors.red)), // 強制填滿剩余空間],
)5. SizedBox
SizedBox 用于??精確控制尺寸??，它既能約束子組件尺寸，也能作為空白占位符使用。
SizedBox(width: 180, height: 40, // 寬高child: Center(child: Text('精準寬高'),),
)Row(children: [SizedBox(width: 20), // 空白占位符Text('水平排列'),],
)6.?Align
Align 用于??控制子組件在父容器中的位置。
Align(Alignment: Alignment.topLeft,child: Text('左側|頂部對齊'),
)7. Center
Center 用于控制子組件的水平|垂直居中。
Center(child: Text('水平|垂直居中'),
)8. Padding
Padding 用于??控制子組件內邊距??，通過在子組件周圍添加空白區域來調整布局間距。
Padding(padding: EdgeInsets.all(8), child: Text('帶內邊距的文本'),
)三、滾動Widget
1. SingleChildScrollView
SingleChildScrollView 用于??包裹單個子組件??的滾動容器，支持垂直或水平方向的滾動。
SingleChildScrollView(scrollDirection: Axis.vertical, // 縱向滾動physics: BouncingScrollPhysics(), // 邊界回彈child: Container(height: 1000),
)2. ListView
ListView 用于創建??可滾動列表??的核心組件，它可以高效地顯示線性排列的數據項，支持垂直或水平滾動。
ListView( // 靜態列表padding: EdgeInsets.symmetric(vertical: 10),children: [ListTile(title: Text('List')),Container(height: 50,alignment: Alignment.centerLeft,padding: EdgeInsets.symmetric(horizontal: 20),child: Text('Row 1'),),],
)
ListView.builder( // 動態列表itemCount: 20,itemBuilder: (context, index) {return Container(height: 50,alignment: Alignment.centerLeft,padding: EdgeInsets.symmetric(horizontal: 20),child: Text('Row ${index+1}'),);},
)
ListView.separated( // 動態列表（設置分隔線）itemCount: 20,separatorBuilder: (context, index) => Divider(height: 1),itemBuilder: (context, index) {return Container(height: 50,alignment: Alignment.centerLeft,padding: EdgeInsets.symmetric(horizontal: 20),child: Text('Row ${index+1}'),);},
)3. GridView
GridView 用于創建??網格布局??，它可以在二維空間中排列子組件，支持垂直或水平滾動。
GridView( // 靜態網格gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, // 每行3列crossAxisSpacing: 10, // 列間距mainAxisSpacing: 10, // 行間距childAspectRatio: 0.7 // 寬高比),children: [Image.asset('images/image_1.png'),Image.asset('images/image_2.png'),...],
)
GridView.count( // 靜態網格crossAxisCount: 3, // 每行3列crossAxisSpacing: 10, // 列間距mainAxisSpacing: 10, // 行間距childAspectRatio: 0.7 // 寬高比children: [Image.asset('images/image_1.png'),Image.asset('images/image_2.png'),...],
)
GridView.builder( // 動態網格gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, // 每行3列crossAxisSpacing: 10, // 列間距mainAxisSpacing: 10, // 行間距childAspectRatio: 0.7 // 寬高比),itemBuilder: (BuildContext context, int index) {return Image.asset('images/image_${index+1}.png');}
)四、內容Widget
1. Text
Text 用于文本內容的??顯示??，提供了豐富的文本樣式控制能力。
Text('文本內容',style: TextStyle(color: Color(0xFF333333), fontSize: 18), // 文本樣式textAlign: TextAlign.left, // 文本對齊方式overflow: TextOverflow.ellipsis, // 溢出處理方式maxLines: 3, // 最高行數
)2. TextField
TextField 用于??文本輸入??，它提供了強大的文本輸入、編輯和驗證功能。
TextField(controller: TextEditingController(text: '123456'), // 管理文本內容decoration: InputDecoration( // 內容裝飾hintText: '請輸入密碼',hintStyle: TextStyle(fontWeight: FontWeight.normal),),style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), // 樣式keyboardType: TextInputType.phone, // 鍵盤類型textInputAction: TextInputAction.done, // 完成按鈕obscureText: false, // 是否隱藏內容onChanged: (value) { }, // 文本變化回調onSubmitted: (value) { }, // 提交回調onEditingComplete: () { }, // 編輯完成回調
)3. Image
Image 用于??圖片內容的展示?，支持從多種來源加載圖片（本地資源、網絡、內存字節等）。
3.1 在工程的 pubspec.yaml 中配置 assets 路勁。
3.2 用 Image.asset 展示內置 images 圖片。
Image.asset('images/logo.png',width: 120, height: 40,fit: BoxFit.fill, // 拉伸填充
)3.2 用 Image.network?展示網絡 URL 圖片。
Image.network('http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',width: 300,height: 100,fit: BoxFit.cover, // 比例填充)五、手勢Widget
1.?GestureDetector
GestureDetector 用于添加各種手勢事件，包含點擊、長按、拖拽、縮放等手勢操作。
GestureDetector(onTap: () => print('單擊'),onDoubleTap: () => print('雙擊'),onLongPress: () => print('長按'),child: Padding(padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),child: Text('手勢交互'),),
)2. InkWell
InkWell 用于??添加觸摸事件??，它提供了單擊、長按等交互的視覺反饋，實現墨水漣漪效果必須包裹在 Material 組件內。
Material( // 添加Material層child: InkWell(onTap: () => print('單擊'),onDoubleTap: () => print('雙擊'),onLongPress: () => print('長按'),splashColor: Color(0x22333333), // 飛濺顏色highlightColor: Color(0x44333333), // 高亮顏色child: Padding(padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),child: Text('點擊 - ??墨水漣漪效果'),),),
)六、按鈕Widget
1. ElevatedButton
ElevatedButton 是??凸起按鈕，適用于主要操作、表單提交。
ElevatedButton(onPressed: () => print('點擊'),child: Text('凸起按鈕', style: TextStyle(fontSize: 20, color: Colors.white)),style: ElevatedButton.styleFrom(backgroundColor: Color(0xFF52d0c2), // 背景色elevation: 3, // 陰影高度shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20), // 圓角),padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15), // 內邊距),
)2.?TextButton
TextButton 是??扁平化文本按鈕??，適用于次要操作、對話框選項和鏈接式操作。
TextButton(onPressed: () => print('點擊'),child: Text('文本按鈕', style: TextStyle(fontSize: 20, color: Colors.white)),style: TextButton.styleFrom(backgroundColor: Colors.black, // 背景色padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15), // 內邊距),
)3. FilledButton
FilledButton 是??實心填充背景??的按鈕，介于 ElevatedButton 和 TextButton 之間。
FilledButton(onPressed: () => print('點擊'),child: Text('填充按鈕', style: TextStyle(fontSize: 20, color: Colors.white)),style: FilledButton.styleFrom(elevation: 3, // 陰影高度backgroundColor: Colors.black, // 背景色padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15), // 內邊距),
)4. OutlinedButton
OutlinedButton 是帶邊框按鈕??，通過邊框強調按鈕形狀，同時保持背景透明。
OutlinedButton(onPressed: () => print('點擊'),child: Text('帶邊框按鈕', style: TextStyle(fontSize: 20, color: Colors.black)),style: OutlinedButton.styleFrom(side: BorderSide(width: 1, color: Colors.black), // 邊框屬性backgroundColor: Colors.white, // 背景色padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15), // 內邊距),
),
OutlinedButton(onPressed: () => print('點擊'),child: SizedBox(width: 196,child: Row(mainAxisAlignment: MainAxisAlignment.center,spacing: 10,children: [Icon(Icons.camera) , Text('帶邊框的圖文按鈕', style: TextStyle(fontSize: 18))],),),style: OutlinedButton.styleFrom(side: BorderSide(width: 1, color: Colors.black),backgroundColor: Colors.white, // 背景色padding: EdgeInsets.symmetric(horizontal: 0, vertical: 15), // 內邊距),
)
