Column 縮成最小高度 | 點燈坊

Column 預設會佔據整個高度，這使得外層的 Widget 如 Center 會失去功能，可使用 mainAxisSize: MainAxisSize.min 將 Column 縮小成 最小高度。

Version

Flutter 3.24.5

Flutter

• Android 與 iOS 都成功使用 Column 縮成最小高度

Column

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Column Minimized Height',
        ),
      ),
      body: const Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Item 1'),
            Text('Item 2'),
          ],
        ),
      ),
    );
  }
}

Line 14

body: const Center(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Text('Item 1'),
      Text('Item 2'),
    ],
  ),
),

• mainAxisSize: MainAxisSize.min：Column 預設會佔據整個高度，只有加上 MainAxisSize.min 時，才會縮小成最小高度

Conclusion

• 當 Column 不使用 mainAxisSize: MainAxisSize.min 時，儘管外面放了 Center()，但看起來還是 垂直向上 而非 垂直置中，因為 Column 預設會佔據整個高度，因此 Center 無法在垂直方向產生效果，除非使用 mainAxisSize: MainAxisSize.min 縮成最小高度後，Center 才會發生作用