Flutter深入淺出元件篇---Align、AnimatedAlign

Jimi發表於2021-08-29
Flutter元件

Align介紹

Align 一般是用來確定子控制元件在父佈局中的位置，比如居中、左上等多個對齊方式。

示例程式碼

本文中很多效果都沒有截圖，可下載原始碼執行專案 原始碼地址，或者通過視訊教程檢視 視訊教程地址

什麼情況下使用Align?

當子元件需要設定位於父元件的某個位置時，需要用到Align

Align建構函式

const Align({
    Key? key,
    this.alignment = Alignment.center,  // 子元件在父元件中的對齊方式
    this.widthFactor,  // 如果設定該值，Align的寬度始終是child寬度的兩倍
    this.heightFactor, // 如果設定該值，Align的高度始終是child高度的兩倍
    Widget? child,	// 子widget
  }) : assert(alignment != null),
       assert(widthFactor == null || widthFactor >= 0.0),
       assert(heightFactor == null || heightFactor >= 0.0),
       super(key: key, child: child);
複製程式碼

完整示例程式碼

import 'package:flutter/material.dart';

class AlignExample extends StatefulWidget {
  @override
  _AlignExampleState createState() => _AlignExampleState();
}

class _AlignExampleState extends State<AlignExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AlignExample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 200,
              height: 200,
              color: Colors.blueAccent,
              child: Align(
                alignment: Alignment.topRight,
                widthFactor: 100.0,
                heightFactor: 2.0,
                child: Text("Align"),
              ),
            )
          ],
        ),
      ),
    );
  }
}
複製程式碼

AlignmentGeometry介紹

AlignmentGeometry 是一個如何對齊child 的一個元件，一般我們都是使用它的子類 Alignment 來進行對齊設定。

Alignment詳解

Alignment繼承自AlignmentGeometry，表示矩形內的一個點，他有兩個屬性x、y，分別表示在水平和垂直方向的偏移。

const Alignment(this.x, this.y)
  : assert(x != null),
		assert(y != null);
複製程式碼

Alignment屬性

/// 頂部左側對齊
static const Alignment topLeft = Alignment(-1.0, -1.0);

/// 頂部中間對齊
static const Alignment topCenter = Alignment(0.0, -1.0);

/// 頂部右側對齊
static const Alignment topRight = Alignment(1.0, -1.0);

/// 中間左側對齊
static const Alignment centerLeft = Alignment(-1.0, 0.0);

/// 垂直居中對齊
static const Alignment center = Alignment(0.0, 0.0);

/// 中間右側對齊
static const Alignment centerRight = Alignment(1.0, 0.0);

/// 底部左側對齊
static const Alignment bottomLeft = Alignment(-1.0, 1.0);

/// 底部中間對齊
static const Alignment bottomCenter = Alignment(0.0, 1.0);

/// 底部右側對齊
static const Alignment bottomRight = Alignment(1.0, 1.0);
複製程式碼

AnimatedAlign介紹

	`Align` 元件的動畫版本，只要對齊方式發生改變，它就會在給定的持續時間內自動轉換子元件的位置。
複製程式碼

AnimatedAlign建構函式

const AnimatedAlign({
  Key? key,
  required this.alignment,  //必傳， 子元件在父元件中的對齊方式 
  this.child,		// 子元件
  this.heightFactor,  // 如果設定該值，Align的高度始終是child高度的兩倍
  this.widthFactor,  // 如果設定該值，Align的寬度始終是child寬度的兩倍 
  Curve curve = Curves.linear,  // 動畫的運動速率
  required Duration duration,   // 必傳，動畫的持續時間
  VoidCallback? onEnd,  // 動畫結束時的回撥
}) : assert(alignment != null),
assert(widthFactor == null || widthFactor >= 0.0),
assert(heightFactor == null || heightFactor >= 0.0),
super(key: key, curve: curve, duration: duration, onEnd: onEnd);
複製程式碼

AnimatedAlign完整示例程式碼

import 'package:flutter/material.dart';

class AnimatedAlignExample extends StatefulWidget {
  @override
  _AnimatedAlignExampleState createState() => _AnimatedAlignExampleState();
}

class _AnimatedAlignExampleState extends State<AnimatedAlignExample> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AnimatedAlignExample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 250.0,
              height: 250.0,
              color: Colors.green,
              child: AnimatedAlign(
                alignment: selected ? Alignment.topRight : Alignment.bottomLeft,
                duration: Duration(milliseconds: 1000),
                curve: Curves.fastOutSlowIn,
                child: Icon(Icons.ac_unit, size: 40,),
                widthFactor: 2.0,
                heightFactor: 2.0,
                onEnd: () {
                  print("動畫結束時進入");
                },
              ),
            ),
            ElevatedButton(
              child: Text('改變alignment引數'),
              onPressed: () {
                setState(() {
                  selected = !selected;
                });
              }),
          ],
        ),
      ),
    );
  }
}
複製程式碼

AnimatedAlign效果展示

總結

當子元件需要設定位於父元件的某個位置時，需要用到Align元件，而AnimatedAlign 是Align 元件的動畫版本，只要對齊方式發生改變，它就會在給定的持續時間內自動轉換子元件的位置。

相關文章