【Flutter 程式設計入門實戰 30 天】Day 6：Container 大大容器
【Flutter 程式設計入門實戰 30 天】線上教學課程目錄 使用 Dart 程式語言，開發 Android 和 iOS APP 應用程式。
哈囉～大家好，我是 KT ，今天實戰第六天，KT 將為大家來介紹，Container 容器佈局元件。Container 是 Flutter 用的最廣泛的的一個容器佈局元件。
Container 容器佈局，常用的屬性
- child：可以設定一個子元件
- color：背景顏色
- alignment：對齊方式
- constraints: 最大高度、最大寬度、最小高度、最小寬度
- margin: 外部間距
- padding: 內部間距
起手式
一開始基礎的畫面程式，在根據此篇主題，加入相關程式碼。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('HKT線上教室'),
),
body: HomePage(),
));
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
//↓↓↓更改此處程式碼↓↓↓
return Container();
}
}
widget 元件
flutter 一切萬物皆為 widget 元件，Text 文字標籤是 widget 元件、Button 按鈕是 widget 元件，Container 容器也是 widget 元件。
child 屬性
child：可以設定一個子元件屬性
範例：
在此範例，我們將在 Container 裡面的 child 屬性，加入一個 Text 文字標籤元件，文字顯示「發大財」
return Container(child: Text('發大財'));
執行畫面
color 屬性
color：設定背景顏色屬性。
範例，三種設定顏色值的方式：
- 設定背景色為紅色
return Container(color: Colors.red);
- 使用 8 個 16 進制設定顏色
return Container(color: Color(0xFFFF0000));
- 使用 ARGB 設定顏色 (A,R,G,B)，第一個欄位為 Alpha 透明度
return Container(color: Color.fromARGB(255, 255, 00, 00));
執行畫面
alignment 屬性
alignment：設定對齊方式屬性。
範例：
新增一個 Text 文字元件，採用置中對齊
return Container(
alignment:Alignment.center,
child: Text('發大財'),
color: Colors.amber,
);
執行畫面
Alignment 常數值
Alignment.bottomCenter：置底中間
Alignment.bottomLeft：左下角
Alignment.center：正中間
Alignment.centerLeft：置左邊中間
Alignment.centerRight 置右中間
Alignment.topCenter：正上方中間
Alignment.topLeft：左上角
Alignment.topRight：右上角
constraints 屬性
constraints: 設定最大高度、最大寬度、最小高度、最小寬度屬性。
範例：
透過 constraints 畫出一個正方形圖案。
return Container(
alignment: Alignment.center,
color: Colors.amber,
child: Text('發大財'),
constraints: BoxConstraints(
maxWidth: 300, maxHeight: 300, minWidth: 50, minHeight: 50),
);
執行畫面
若要 Container 在畫面正中間，可以在 Container 外面新增一各 Center 置中佈局容器，將此 Container 設為此 Center 的子元件。
return Center(
child: Container(
alignment: Alignment.center,
color: Colors.amber,
child: Text('發大財'),
constraints: BoxConstraints(
maxWidth: 300,
maxHeight: 300,
minWidth: 50,
minHeight: 50)));
執行畫面
margin 屬性
margin: 設定外部間距屬性，透過 EdgeInsets 常數值來進行設定。
範例：
- EdgeInsets.all()，一個值設定四邊的間距
return Center(
child: Container(
alignment: Alignment.center,
color: Colors.amber,
child: Text('發大財'),
margin: EdgeInsets.all(50),
));
執行畫面
- EdgeInsets.only()，分別設定四邊的不一樣間距
return Center(
child: Container(
alignment: Alignment.center,
color: Colors.amber,
child: Text('發大財'),
margin: EdgeInsets.only(left: 50,top:10,right: 100,bottom: 10),
));
執行畫面
padding 屬性
padding: 設定內部間距屬性，和 margin一樣透過 EdgeInsets 常數值來進行設定。
範例：
- EdgeInsets.only()，分別設定四邊的不一樣間距
return Center(
child: Container(
color: Colors.amber,
child: Text('發大財'),
padding: EdgeInsets.only(left: 50,top:100,right: 100,bottom: 10),
));
執行畫面
補充：視覺輔助排版工具
在 main 裡，設定 debugPaintSizeEnabled 屬性值為 true 和 import 匯入對應 lib，即可以開啟輔助輔助排版工具。
import 'package:flutter/rendering.dart';
void main() {
debugPaintSizeEnabled =true;
runApp(MyApp());
}
執行畫面
補充：關閉右上角 Debug 標籤
在 MaterialApp 裡，設定 debugShowCheckedModeBanner 屬性值為 false ，即可以關閉右上角 Debug 標籤。
...
...
...
MaterialApp(
debugShowCheckedModeBanner: false
)
...
...
...
執行畫面
那今天就介紹到這邊囉～
順帶一提，KT 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這篇文章分享給更多人喔。
我們明天見囉！！！掰掰～
參考資料
HKT 線上教室
http://tw-hkt.blogspot.com/
Background vector created by freepik
https://www.freepik.com
Flutter 官方文件
https://api.flutter.dev/flutter/widgets/Container-class.html
