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 组件的动画版本，只有对齐形式产生扭转，它就会在给定的持续时间内主动转换子组件的地位。