點燈坊

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

Spacer 使 Widget 水平向左右兩側對齊

Sam Xiao's Avatar 2024-11-21

要將 Widget 同時水平向左右兩側對齊是常見需求,可使用 Spacer 實現。

Version

Flutter 3.24.5

Flutter

overview01

  • Android 與 iOS 都成功使用 Spacer 將 widget 水平向左右兩側對齊

Spacer

import 'package:flutter/material.dart';

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

  
  Widget build(BuildContext context) {
    var appBar = AppBar(
      title: const Text('Spacer'),
    );

    var column1 = Container(
      color: Colors.red,
      width: 50,
      height: 50,
    );

    var column2 = Container(
      color: Colors.green,
      width: 50,
      height: 50,
    );

    var column3 = Container(
      color: Colors.blue,
      width: 50,
      height: 50,
    );

    var body = Center(
      child: Row(
        children: [
          column1,
          column2,
          Spacer(),
          column3,
        ],
      ),
    );

    return Scaffold(
      appBar: appBar,
      body: body,
    );
  }
}

Line 30

var body = Center(
  child: Row(
    children: [
      column1,
      column2,
      Spacer(),
      column3,
    ],
  ),
);
  • Row 放了 column1column2column3,其中 column1column2 水平靠左,而 column3 水平靠右
  • Spacer 會佔據所有 Row 的剩餘空間,因此 column3 會水平靠右

Conclusion

  • 亦可使用 Row 的 mainAxisAlignment: MainAxisAlignment.spaceBetween 實現,不過 Spacer 的靈活度更高