【從零開始學 Flutter 程式設計】Container 容器佈局介紹

【從零開始學 Flutter 程式設計】線上教學課程目錄 使用 Dart 程式語言，開發 Android 和 iOS APP 應用程式。

Container 是 Flutter 用的最廣泛的的一個容器佈局元件。

Container 容器佈局，常用的屬性

• child：可以設定一個子元件
• color：背景顏色
• alignment：對齊方式
• constraints: 最大高度、最大寬度、最小高度、最小寬度
• margin: 外部間距
• padding: 內部間距

起手式

MyApp 透過 stless 關鍵字，快速生成程式碼，別傻傻的一個字一個字打。

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();
  }
}

child 屬性

child：可以設定一個子元件屬性

範例：

新增一個 Text 文字元件，文字顯示「發大財」

Container(child: Text('發大財'))

執行畫面

color 屬性

color：設定背景顏色屬性。

範例：

• 設定背景色為紅色

Container(color: Colors.red)

• 使用 8 個 16 進制設定顏色

Container(color: Color(0xFFFF0000))

• 使用 ARGB 設定顏色 (A,R,G,B)，第一個欄位為 Alpha 透明度

Container(color: Color.fromARGB(255, 255, 00, 00))

alignment 屬性

alignment：設定對齊方式屬性。

範例：

新增一個 Text 文字元件，採用置中對齊

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 畫出一個正方形圖案。

Container(
          alignment: Alignment.center,
          color: Colors.amber,
          child: Text('發大財'),
          constraints: BoxConstraints(
              maxWidth: 300, maxHeight: 300, minWidth: 50, minHeight: 50),
        )

執行畫面

若要 Container 在畫面正中間，可以在 Container 外面新增一各 Center 置中佈局容器，將此 Container 設為此 Center 的子元件。

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()，一個值設定四邊的間距

Center(
        child: Container(
        alignment: Alignment.center,
        color: Colors.amber,
        child: Text('發大財'),
        margin: EdgeInsets.all(50),
      ))

執行畫面

• EdgeInsets.only()，分別設定四邊的不一樣間距

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()，分別設定四邊的不一樣間距

Center(
        child: Container(
        color: Colors.amber,
        child: Text('發大財'),
        padding: EdgeInsets.only(left: 50,top:100,right: 100,bottom: 10),
      ))

執行畫面

---

那這次的課程就介紹到這邊囉～

順帶一提，KT 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這套課程分享給更多人喔。

我們下次再見囉！！！掰掰～

參考資料

Flutter 官方文件： Container class