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

更新於 發佈於 閱讀時間約 8 分鐘
raw-image
【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 標籤。確保使用者在使用應用程式時不會受到干擾,並讓整體界面看起來更加乾淨和專業。

留言
avatar-img
留言分享你的想法!
avatar-img
HKT實驗室
23會員
261內容數
哈囉!歡迎光臨我的沙龍!我是 KT,一位對應用程式開發充滿熱情的開發者。在這個專屬空間,我將與您分享我在應用開發領域的深入學習心得和豐富的實戰經驗。如果您對應用程式開發技術同樣充滿好奇,渴望不斷探索新知,歡迎成為我們的會員,一起在應用程式開發的旅途上,探索更深層次的技術世界,享受學習的樂趣。
HKT實驗室的其他內容
2024/11/28
在本文中,我們將介紹 TextField 文字輸入框元件及其基本用法。TextField 是一個關鍵的元件,使用者可以輕鬆地輸入文字,廣泛應用於各類應用程式中,如表單、搜尋框和聊天介面等。
Thumbnail
2024/11/28
在本文中,我們將介紹 TextField 文字輸入框元件及其基本用法。TextField 是一個關鍵的元件,使用者可以輕鬆地輸入文字,廣泛應用於各類應用程式中,如表單、搜尋框和聊天介面等。
Thumbnail
2024/11/28
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片,以及如何載入網路圖片的完整過程。透過這篇文章,您將學會如何有效地管理圖片資源,並在應用程式中正確顯示圖片,提升您的 Flutter 開發技能。
Thumbnail
2024/11/28
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片,以及如何載入網路圖片的完整過程。透過這篇文章,您將學會如何有效地管理圖片資源,並在應用程式中正確顯示圖片,提升您的 Flutter 開發技能。
Thumbnail
2024/11/26
這篇文章深入探討了 Flutter 框架中的 ElevatedButton(漂浮按鈕)元件。文章介紹了其基本用法,包括必填參數 onPressed 和 child 的解析,並示範了如何使用匿名函數來處理按鈕點擊事件。此外,還說明了如何設定按鈕的顏色和形狀,並提供了完整的範例程式碼。
Thumbnail
2024/11/26
這篇文章深入探討了 Flutter 框架中的 ElevatedButton(漂浮按鈕)元件。文章介紹了其基本用法,包括必填參數 onPressed 和 child 的解析,並示範了如何使用匿名函數來處理按鈕點擊事件。此外,還說明了如何設定按鈕的顏色和形狀,並提供了完整的範例程式碼。
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
在 Bootstrap 5 中,容器(Container)是響應式網頁設計的基礎結構,用於包裹網頁內容,並為內部元素提供對齊和間距。容器分為 固定寬度容器 和 流體容器 兩種形式。 1. 什麼是容器 (Container)? 容器是 Bootstrap 提供的核心布局工具。 容器確保內容在不
Thumbnail
在 Bootstrap 5 中,容器(Container)是響應式網頁設計的基礎結構,用於包裹網頁內容,並為內部元素提供對齊和間距。容器分為 固定寬度容器 和 流體容器 兩種形式。 1. 什麼是容器 (Container)? 容器是 Bootstrap 提供的核心布局工具。 容器確保內容在不
Thumbnail
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片,以及如何載入網路圖片的完整過程。透過這篇文章,您將學會如何有效地管理圖片資源,並在應用程式中正確顯示圖片,提升您的 Flutter 開發技能。
Thumbnail
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片,以及如何載入網路圖片的完整過程。透過這篇文章,您將學會如何有效地管理圖片資源,並在應用程式中正確顯示圖片,提升您的 Flutter 開發技能。
Thumbnail
在本篇教學中,我們介紹了 Flutter 中的 Row 和 Column 佈局容器,並探討了它們的基本用法及進階技巧。此外,我們還提到如何使用快捷鍵來格式化程式碼,以提升可讀性。
Thumbnail
在本篇教學中,我們介紹了 Flutter 中的 Row 和 Column 佈局容器,並探討了它們的基本用法及進階技巧。此外,我們還提到如何使用快捷鍵來格式化程式碼,以提升可讀性。
Thumbnail
本文深入探討 Flutter 中的 Container 元件,這是一個多功能的包裝 Widget,能夠有效管理和裝飾其他 Widget。文章將詳細說明如何調整 Container 的大小、設置外部間距(margin)以及使用 BoxDecoration 來自訂樣式。
Thumbnail
本文深入探討 Flutter 中的 Container 元件,這是一個多功能的包裝 Widget,能夠有效管理和裝飾其他 Widget。文章將詳細說明如何調整 Container 的大小、設置外部間距(margin)以及使用 BoxDecoration 來自訂樣式。
Thumbnail
本文介紹了 Dart 中具有參數的函式。具有參數的函式允許靈活地處理不同輸入,增強程式碼的模組化和可重用性。透過範例說明,讀者能夠理解如何定義和使用這些函式,並掌握進階概念以提升程式設計能力。
Thumbnail
本文介紹了 Dart 中具有參數的函式。具有參數的函式允許靈活地處理不同輸入,增強程式碼的模組化和可重用性。透過範例說明,讀者能夠理解如何定義和使用這些函式,並掌握進階概念以提升程式設計能力。
Thumbnail
本篇文章介紹 GameWidget 是 Flutter 中用於嵌入遊戲實例的 widget,能作為應用程式的根部件或嵌入其他 widget 中。它自動擴展以填滿可用空間,並提供多種結構支援功能,如加載、錯誤處理和背景裝飾。
Thumbnail
本篇文章介紹 GameWidget 是 Flutter 中用於嵌入遊戲實例的 widget,能作為應用程式的根部件或嵌入其他 widget 中。它自動擴展以填滿可用空間,並提供多種結構支援功能,如加載、錯誤處理和背景裝飾。
Thumbnail
方法 asset:載入此APP指定資料夾內的資源圖片。 Image.asset('assets/images/logo.png') file:載入手機指定路徑位置圖片。 Image.file('your_image_path') network:載入網路指定網址圖片。 Image
Thumbnail
方法 asset:載入此APP指定資料夾內的資源圖片。 Image.asset('assets/images/logo.png') file:載入手機指定路徑位置圖片。 Image.file('your_image_path') network:載入網路指定網址圖片。 Image
Thumbnail
Container child:可以設定一個子元件 Container(child:Text('child')); color:背景顏色 Container(color: Color.fromARGB(255, 255, 255, 255)); alignment:對齊方式 Co
Thumbnail
Container child:可以設定一個子元件 Container(child:Text('child')); color:背景顏色 Container(color: Color.fromARGB(255, 255, 255, 255)); alignment:對齊方式 Co
Thumbnail
如果你是剛入門Flutter的工程師,可以參考這篇文章,我會告訴大家自己常用的套件以及如何規劃檔案的分類!
Thumbnail
如果你是剛入門Flutter的工程師,可以參考這篇文章,我會告訴大家自己常用的套件以及如何規劃檔案的分類!
Thumbnail
說明Flutter 包(Package)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
說明Flutter 包(Package)專案範例的架構與實際載入並執行在各平台的顯示畫面
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News