【Flutter】布局類組件之對齊和相對定位

前言

如果只想簡單的調整一個子元素在父元素中的位置的話，使用Align組件會更簡單一些。

接口描述

const Align({
    Key key,
    // 需要一個AlignmentGeometry類型的值，表示子組件在父組件中的起始位置。
    // AlignmentGeometry 是一個抽象類，它有兩個常用的子類：Alignment和 FractionalOffset。
    this.alignment = Alignment.center,

    // widthFactor和heightFactor是用於確定Align 組件本身寬高的屬性；
    // 它們是兩個縮放因子，會分別乘以子元素的寬、高，最終的結果就是Align 組件的寬高。
    // 如果值為null，則組件的寬高將會占用盡可能多的空間。
    this.widthFactor,
    this.heightFactor,
    Widget child,
  })

代碼示例

import 'package:flutter/material.dart';

class AlignTest extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('對齊和相對定位(Align)'),
      ),
      body: Container(
        // 顯式指定了Container的寬、高都為120
        height: 120.0,
        width: 120.0,
        color: Colors.blue[50],
        child: Align(
          // 不顯式指定寬高，通過同時指定widthFactor和heightFactor 為2也是可以達到同樣的效果：2*60=120
          widthFactor: 2,
          heightFactor: 2,
          alignment: Alignment.topCenter,
          // FlutterLogo 是Flutter SDK提供的一個組件，內容就是Flutter的商標。
          child: FlutterLogo(
            size: 60,
          ),
        ),
      ),
    );
  }
}