點燈坊

失くすものさえない今が強くなるチャンスよ

Row 使 Widget 水平排列

Sam Xiao's Avatar 2024-09-06

Row 為 Layout Widget，可將內層 Widget 水平排列。

Version

Flutter 3.24

Flutter

row01

  • 1 2 3 水平排列，且水平垂直置中

Home

home.dart

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
          Container(
              color: Colors.amber,
              child: const Text('1', style: TextStyle(fontSize: 30))),
          Container(
              color: Colors.red,
              child: const Text('2', style: TextStyle(fontSize: 30))),
          Container(
              color: Colors.green,
              child: const Text('3', style: TextStyle(fontSize: 30))),
        ])));
  }
}
  • 定義 Home page

Line 6

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: Center(
          child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
        Container(
            color: Colors.amber,
            child: const Text('1', style: TextStyle(fontSize: 30))),
        Container(
            color: Colors.red,
            child: const Text('2', style: TextStyle(fontSize: 30))),
        Container(
            color: Colors.green,
            child: const Text('3', style: TextStyle(fontSize: 30))),
      ])));
}
  • Row：將內層 widget 水平排列
    • children：設定內層多個 widget，為 Array
    • mainAxisAlignment：設定主軸 alignment
    • crossAxisAlignment：設定垂直軸 aligment

Conclusion

  • Row 可簡單將內層 widget 水平排列，且不受長寬限制

# Flutter