【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,
          ),
        ),
      ),
    );
  }
}