【Flutter 學習筆記】Row、Column 佈局容器

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

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

今天我們要來探討 Flutter 中的兩個重要佈局容器：Row 和 Column。這兩個 Widget 是構建 Flutter 應用界面的基石，能夠幫助我們有效地排列子元件。接下來，我們將逐步解析這些概念，並透過程式碼示範來加深理解。

1. 環境設置

在我們的 MaterialApp 框架中，body 參數傳入了 DemoPage 頁面元件。現在，讓我們切換到 DemoPage 頁面，並使用 stless 快捷鍵來快速生成 StatelessWidget 類別的程式碼。

class DemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Placeholder(); // 這裡稍後會替換成 Row 或 Column
  }
}

2. Row 水平佈局容器

首先，我們來看看 Row 水平佈局容器。Row 可以讓子元件從左至右排列。在 build 方法中，我們將返回一個 Row Widget。

@override
Widget build(BuildContext context) {
  return Row(
    children: [
      Container(
        width: 100,
        height: 100,
        color: Colors.yellow,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ],
  );
}

2.1 Row 的結構解析

• Row Widget：這是一個可以包含多個子元件的容器，透過 children 參數來指定。Container：每個子元件都是一個 Container，這裡我們設定了寬度、高度和背景顏色。你會看到三個顏色方塊水平排列。可以嘗試更改方塊的寬度、高度和顏色，觀察效果。

3. Column 垂直佈局容器

接下來，我們來看看 Column 垂直佈局容器。Column 可以讓子元件從上至下排列。現在，我們將把 Row Widget 改成 Column Widget。

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Container(
        width: 100,
        height: 100,
        color: Colors.yellow,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ],
  );
}

3.1 Column 的結構解析

• Column Widget：這是一個可以包含多個子元件的容器，透過 children 參數來指定，並且子元件會垂直排列。你會看到三個顏色方塊從水平排列變成垂直排列。

透過這個範例，應該能夠理解 Row 和 Column Widget 的差異。

4. 混合使用 Row 和 Column

值得注意的是，Row 和 Column 可以互相嵌套使用。例如，您可以在 Row 的子元件中放置 Column，或在 Column 的子元件中放置 Row。這樣的組合可以創造出更複雜的佈局。

@override
Widget build(BuildContext context) {
  return Row(
    children: [
      Column(
        children: [
          Container(width: 50, height: 50, color: Colors.blue),
          Container(width: 50, height: 50, color: Colors.orange),
        ],
      ),
      Column(
        children: [
          Container(width: 50, height: 50, color: Colors.purple),
          Container(width: 50, height: 50, color: Colors.cyan),
        ],
      ),
    ],
  );
}

5. 佈局技巧

了解 Row 和 Column 的基本用法後，我們可以進一步探索一些佈局技巧，這些技巧能幫助我們創建更具吸引力和功能性的界面。

5.1 Padding 和 Margin

在設計界面時，適當的間距是非常重要的。Flutter 提供了 Padding 和 Margin 來控制元件之間的距離。

• Padding：用於控制元件內部的間距。Margin：用於控制元件外部的間距。

以下是如何使用 Padding 和 Margin 的範例：

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Container(
        width: 100,
        height: 100,
        color: Colors.yellow,
        padding: EdgeInsets.all(10), // 內部間距
      ),
      SizedBox(height: 20), // 用於增加元件之間的空間
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
        margin: EdgeInsets.only(top: 20), // 外部間距
      ),
    ],
  );
}

5.2 使用 Spacer

在 Row 和 Column 中，您可以使用 Spacer Widget 來自動調整子元件之間的空間。這對於創建靈活的佈局非常有用。

@override
Widget build(BuildContext context) {
  return Row(
    children: [
      Container(width: 50, height: 50, color: Colors.red),
      Spacer(), // 自動填充空間
      Container(width: 50, height: 50, color: Colors.blue),
    ],
  );
}

5.3 Flex 和 Expanded

在 Row 和 Column 中，您可以使用 Expanded Widget 來讓子元件佔據可用的空間。這對於需要根據可用空間調整大小的元件特別有用。

dart複製代碼@override
Widget build(BuildContext context) {
  return Row(
    children: [
      Expanded(
        child: Container(color: Colors.red),
      ),
      Expanded(
        child: Container(color: Colors.green),
      ),
      Expanded(
        child: Container(color: Colors.blue),
      ),
    ],
  );
}

6. 程式碼整理

在我們進行程式碼編寫的過程中，保持程式碼的整潔和可讀性是非常重要的。為了讓程式碼更易於維護和理解，我們可以使用格式化工具來整理程式碼。

6.1 程式碼格式化

在 Flutter 開發中，使用 Visual Studio code IDE 編輯器可以使用以下快捷鍵來快速整理程式碼：

• Windows：按下 Shift + Alt + F
• Mac：按下 Shift + Option + F

此外，您也可以使用滑鼠右鍵點擊編輯器，開啟選單後選擇「格式化文件」，這樣也能達到相同的效果。這樣的操作不僅能提升程式碼的可讀性，還能幫助您更快地找到錯誤和進行調整。