【從零開始學 Flutter 程式設計】Row 和 Column 容器佈局

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

Row 水平佈局容器

Column 垂直佈局容器

Row 水平佈局容器

範例

在 Row 水平佈局,加入三個 Text 文字元件
Row(
    children: <Widget>[Text('1'), Text('2'), Text('3')],
    )

執行畫面

Row 對齊方式

主軸方向的對齊方式 mainAxisAlignment

Row 主軸為水平,Column 主軸為垂直

MainAxisAlignment.start:靠左對其
MainAxisAlignment.end: 靠右對齊
MainAxisAlignment.center: 置中
MainAxisAlignment.spaceBetween: 中間留空間
MainAxisAlignment.spaceAround: 兩邊空間均分
MainAxisAlignment.spaceEvenly: 均分空間

副軸方向的對齊方式 crossAxisAlignment

Row 副軸為垂直,Column 副軸為水平

CrossAxisAlignment.start: 縱向起點
CrossAxisAlignment.end: 縱向終點
CrossAxisAlignment.center: 縱向中心點
CrossAxisAlignment.stretch: 佔滿縱向
CrossAxisAlignment.baseline: 縱向對齊 baseline
(其中 baseline 需與 textBaseline: TextBaseline.alphabetic 搭配使用否則會報錯)

Column 垂直佈局容器

在 Column 水平佈局,加入三個 Text 文字元件
Column(
        children: <Widget>[Text('1'), Text('2'), Text('3')],
      )

執行畫面

Column 對齊方式

主軸方向的對齊方式 mainAxisAlignment

Row 主軸為水平,Column 主軸為垂直

MainAxisAlignment.start:縱向起點
MainAxisAlignment.end: 縱向終點
MainAxisAlignment.center: 縱向中心點
MainAxisAlignment.spaceBetween: 中間留空間
MainAxisAlignment.spaceAround: 兩邊空間均分
MainAxisAlignment.spaceEvenly: 均分空間

副軸方向的對齊方式 crossAxisAlignment

Row 副軸為垂直,Column 副軸為水平

CrossAxisAlignment.start: 靠左對齊
CrossAxisAlignment.end: 靠右對齊
CrossAxisAlignment.center: 置中
CrossAxisAlignment.stretch: 佔滿橫向
CrossAxisAlignment.baseline: 橫向對齊 baseline
(其中 baseline 需與 textBaseline: TextBaseline.xxx 搭配使用否則會報錯)

練習:用兩個文字色塊來展示 Row 和 Column

試著更換以下程式碼中的容器為 Row 或 Column ,且分別切換設定 mainAxisAlignment 和 crossAxisAlignment 等相關對齊參數。
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 Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Container(
          color: Colors.amber,
          child: Text('1', style: TextStyle(fontSize: 100)),
        ),
        Container(
          color: Colors.red,
          child: Text('2', style: TextStyle(fontSize: 100)),
        ),
        Container(
          color: Colors.green,
          child: Text('3', style: TextStyle(fontSize: 100)),
        )
      ],
    );
  }
}

執行畫面

補充資料

Row 和 Column 容器佈局,可以搭配 Expanded 或 Flexible 防止版面跑版。

那這次的課程就介紹到這邊囉~
順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這套課程分享給更多人喔。
我們下次再見囉!!!掰掰~

參考資料

這個網誌中的熱門文章

最新入門零基礎 Java 教學【從零開始學 Java 程式設計】Java教學課程目錄 (IntelliJ IDEA 開發教學)

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

nano 文字編輯器

Android Studio 歷代版本下載點

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)