【Flutter 學習筆記】 Container 容器元件

【Flutter 學習筆記】🎬 教學影片：連結

【Flutter 學習筆記】📚 文章目錄：連結

今天我們要一起來探索 Container 容器元件。Container 是一個多功能的 Widget，主要用來包裝其他 Widget，並且可以設定寬度、高度、內距、外距、背景顏色等屬性。接下來，我們將逐步拆解 Container 的使用，讓大家能夠更清楚地理解每個部分的功能和用途。

啟用除錯模式

在開始之前，為了方便觀察 Widget 的佈局大小，我們可以啟用 debugPaintSizeEnabled 模式。在 main 函數中加入以下程式碼：

debugPaintSizeEnabled = true;

這個功能的啟用或關閉都需要重新編譯整個應用程式，無法單純使用 Hot Reload。這是因為這個設定會影響整個應用程式的渲染方式。當我們重新編譯後，可以看到每個 Widget 的邊框，這些邊框能幫助我們更好地理解和調整 Widget 的佈局。

建立無狀態的 Widget

接下來，我們將使用 StatelessWidget 來建立一個無狀態的 Widget。在 MaterialApp 的 home 參數中，我們傳入 HomePage()，這是我們自己撰寫的 Widget。為了讓程式碼更易於維護，我們將 HomePage 的程式碼獨立到一個名為 home_page.dart 的檔案中。

在 home_page.dart 中實作 HomePage Widget

在 home_page.dart 檔案中，我們可以看到 HomePage 繼承自 StatelessWidget，並實作 build 方法。以下是程式碼範例：

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amber,
    );
  }
}

在 build 方法中，我們回傳一個 Container Widget，並透過 color 屬性將背景顏色設定為琥珀色。開啟 debugPaintSizeEnabled 除錯模式後，我們可以更清楚地了解整個畫面的佈局結構。

調整 Container 的大小

現在，我們來試著更改 Container 的大小。在 Container 的小括號中加入 width 和 height 屬性：

Container(
  width: 300,
  height: 200,
  color: Colors.amber,
)

當我們使用快捷鍵存檔後，啟用 Hot Reload 功能，就可以看到 Container 的大小被設定為 300 x 200。

設定外部間距

接下來，我們來試著更改外部間距的屬性。在 Container 中加入 margin 屬性：

Container(
  width: 300,
  height: 200,
  margin: EdgeInsets.all(10),
  color: Colors.amber,
)

這樣就會在 Container 的四周產生 10 個單位的外距。再次使用 Hot Reload 功能後，可以看到效果。

使用 BoxDecoration 裝飾屬性

我們可以進一步使用 decoration 屬性來設定邊框、圓角等樣式。以下是範例：

Container(
  width: 300,
  height: 200,
  margin: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.amber,
    borderRadius: BorderRadius.circular(50),
  ),
)

需要注意的是，顏色屬性 color 必須放在 decoration 屬性中，否則會報錯。使用 Hot Reload 功能後，可以看到 Container 的四周出現 50 的圓角。

加入 Text Widget

接下來，我們在 Container 中加入一個 Text Widget，使用 child 屬性：

Container(
  width: 300,
  height: 200,
  margin: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.amber,
    borderRadius: BorderRadius.circular(50),
  ),
  child: Text(
    'HKT線上教室',
    style: TextStyle(fontSize: 30),

),

在這段程式碼中，我們將 Text Widget 的內容設為「HKT線上教室」，並設定字體大小為 30。接下來，我們可以為 Container 設定內部間距，使用 padding 屬性：

Container(
  width: 300,
  height: 200,
  margin: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.amber,
    borderRadius: BorderRadius.circular(50),
  ),
  padding: EdgeInsets.only(left: 50, top: 100, right: 100, bottom: 10),
  child: Text(
    'HKT線上教室',
    style: TextStyle(fontSize: 30),
  ),
)

在這裡，我們使用 EdgeInsets.only 來分別設定四個方向的內部間距：左邊 50、上方 100、右邊 100 以及下方 10 的單位。當我們使用 Hot Reload 功能後，可以看到 Container 的內部間距已經正確顯示。

隱藏 Debug 標籤

最後，讓我們補充一個小知識。在 MaterialApp 中，我們可以加入以下程式碼來隱藏右上角的 Debug 標籤：

MaterialApp(
  debugShowCheckedModeBanner: false,
  home: HomePage(),
)

當我們使用 Hot Reload 功能後，右上角的 Debug 標籤將不再顯示。

在應用程式正式發佈之前，務必隱藏這個 Debug 標籤。確保使用者在使用應用程式時不會受到干擾，並讓整體界面看起來更加乾淨和專業。