Flutter 基礎布局Widgets之Align詳解

概述

一般來說，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,
          ),
      ),
    );
  }
}

           

示例效果

讀者福利

Android架構師的門檻，有沒有免費學習資料？

加入Android進階架構群；1007478004，免費提供視訊和資料，一起學習，互相讨論。