【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:可以設定一個子元件屬性

範例:

在此範例,我們在 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),
      ))

執行畫面


補充:視覺輔助排版工具

在 main 裡,設定 debugPaintSizeEnabled 屬性值為 true ,即可以開啟輔助輔助排版工具。
void main() {
  debugPaintSizeEnabled =true;
  
  runApp(MyApp());
}

補充:關閉右上角 Debug 標籤

void main() {
  debugShowCheckedModeBanner: false, 
  
  runApp(MyApp());
}
那今天就介紹到這邊囉~
順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這篇文章分享給更多人喔。
我們明天見囉!!!掰掰~

參考資料

HKT 線上教室
http://tw-hkt.blogspot.com/
Background vector created by freepik
https://www.freepik.com

留言

這個網誌中的熱門文章

16天記下7000單字

Costco 好市多 AFTERSHOKZ 骨傳導 藍牙運動耳機 AS650 開箱實測評價與心得

2019 最新入門零基礎【從零開始學 Java 程式設計】線上教學課程目錄 (7/5 更新囉~)