Flutter筆記 - 佈局類組件

佈局類組件

Row水平方向排列

1. textDirection 水平方向子組件佈局順序。
2. mainAxisSize 佔用空間，默認MainAxisSize.MAX
3. mainAxisAligment 對齊方式
   MainAxisAligment.start 初始方向對齊
   MainAxisAligment.ltr 左對齊
   MainAxisAligment.rtl 右對齊
   MainAxisAligment.end 和MainAxisAligment.start相反
   MainAxisAligment.center 居中對齊
4. verticalDirection:處置對齊方向，默認從上到下VerticalDirection.down
5. crossAxisAligment 子組件縱軸對齊方式
   crossAxisAligment.start 頂部對齊
   crossAxisAligment.start 底部對齊
   children:子組件數組

彈性佈局Flex

沿着水平或者垂直方向排列。
flex 比例
Spacer爲Expandes的包裝類

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Flex(
          direction: Axis.horizontal,
          children: <Widget>[
            Expanded(
                flex: 2,
                child: Container(
                  height: 30,
                  color: Colors.green,
                )),
            Expanded(
                flex: 1,
                child: Container(
                  height: 30,
                  color: Colors.green,
                ))
          ],
        ),
        Padding(
          padding: const EdgeInsets.only(top: 20.0),
          child: SizedBox(
            height: 100,
            child: Flex(
              direction: Axis.horizontal,
              children: <Widget>[
                Expanded(
                    flex: 1,
                    child: Container(
                      height: 30,
                      color: Colors.grey,
                    )),
                const Spacer(
                  flex: 2,
                ),
                Expanded(
                    flex: 1,
                    child: Container(
                      height: 30,
                      color: Colors.black,
                    )),
              ],
            ),
          ),
        )
      ],
    );
  }
}

流式佈局

spaceing：主軸子Widget間距。
runSpacing:縱軸間距。
runAligment:縱軸對齊方式。
例子：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Wrap(
          spacing: 8.0,
          runSpacing: 4.0,
          alignment: WrapAlignment.center,
          children: const <Widget>[
            Chip(label: Text("A"),
              avatar: CircleAvatar(backgroundColor: Colors.blue,child: Text("A")),
            ),
            Chip(label: Text("B"),
              avatar: CircleAvatar(backgroundColor: Colors.blue,child: Text("B")),
            ),
            Chip(label: Text("C"),
              avatar: CircleAvatar(backgroundColor: Colors.blue,child: Text("C")),
            ),
            Chip(label: Text("D"),
              avatar: CircleAvatar(backgroundColor: Colors.blue,child: Text("D")),
            ),
          ],
        )
      ],
    );
  }

}