Align 相对定位

Align 相对定位.png 盒子模型.png

Align 和 Positioned都可以用于指定子元素相对于父容器的偏移定位，Positioned定位的参考系可以是父容器矩形的四个顶点，而Align则需先通过alignment参数来确定坐标原点。

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: LayoutWidget(),
  ));
}

class LayoutWidget extends StatefulWidget {
  const LayoutWidget({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _LayoutState();
}

class _LayoutState extends State<LayoutWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('相对定位'),
        ),
        body: Container(
          // width: 200.0,
          // height: 200.0,
          color: Colors.blue.shade50,
          //调整一个子组件在父亲容器中的位置
          child: const Align(
            //缩放因子决定Align容器宽高
            widthFactor: 2,
            heightFactor: 2,
            //alignment: Alignment.center,
            //FractionalOffset 的坐标原点为矩形的左侧顶点与布局系统一致
            //实际偏移 = (FractionalOffset.x * childWidth, FractionalOffset.y * childHeight)
            alignment: FractionalOffset(2, 2),
            child: FlutterLogo(
              size: 100,
            ),
          ),
        ));
  }
}