Flutter 基础布局Widgets之Align详解

135.jpg

概述

一般来说，Align的使用都是其他控件的一个参数，目的是为了设置子child的对齐方式，比如居中，左上，右下等多个对齐方向，其本身用法也多灵活。

构造函数

const Align({
    Key key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget child
  })

• alignment 设置对齐方向，使有多种使用方式：
  比如：FractionalOffset(0.5, 0.5) == Alignment(0.0,0.0) == Alignment.center ，都是将子child居中对齐的控制方式
  Alignment(0.0,0.0)表示矩形的中心。从-1.0到+1.0的距离是矩形的一边到另一边的距离。
  而Alignment中还可以这样使用对齐方式的控制，也是较为常用的使用方式：

  /// The top left corner.
  static const Alignment topLeft = Alignment(-1.0, -1.0);

  /// The center point along the top edge.
  static const Alignment topCenter = Alignment(0.0, -1.0);

  /// The top right corner.
  static const Alignment topRight = Alignment(1.0, -1.0);

  /// The center point along the left edge.
  static const Alignment centerLeft = Alignment(-1.0, 0.0);

  /// The center point, both horizontally and vertically.
  static const Alignment center = Alignment(0.0, 0.0);

  /// The center point along the right edge.
  static const Alignment centerRight = Alignment(1.0, 0.0);

  /// The bottom left corner.
  static const Alignment bottomLeft = Alignment(-1.0, 1.0);

  /// The center point along the bottom edge.
  static const Alignment bottomCenter = Alignment(0.0, 1.0);

  /// The bottom right corner.
  static const Alignment bottomRight = Alignment(1.0, 1.0);

即本质就是类似于语法糖将各个方向的对齐方式简单封装了下。
FractionalOffset(1, 1) 类似Alignment() 但是坐标起点是左上角，且范围为0~1 比如 FractionalOffset(0.5, 0.5) 代表中间位置

• widthFactor 如果非空，则将其宽度设置为子元素的宽度乘以该因子，可以大于或小于1.0，但必须是正数。
• heightFactor 如果非空，则将其高度设置为子元素的高度乘以该因子，可以大于或小于1.0，但必须是正数。

示例代码

// align

import 'package:flutter/material.dart';

class AlignLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Align')
      ),
      // 对齐小部件
      body: Align(
          // Alignment(0.0,0.0)表示矩形的中心。从-1.0到+1.0的距离是矩形的一边到另一边的距离。
          // alignment: Alignment(1, 0),
          // FractionalOffset(1, 1) 类似Alignment() 但是坐标起点是左上角，且范围为0~1 比如 FractionalOffset(0.5, 0.5) 代表中间位置
          alignment: Alignment.bottomRight,
          child: Container(
            color: Colors.blueAccent,
            width: 100,
            height: 100,
          ),
      ),
    );
  }
}

示例效果

38AB9A013729BA2F5AD366131691A548.png