一统天下 flutter - widget 容器类(只能有一个子): Align - 对齐方式

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 容器类(只能有一个子): Align - 对齐方式

示例如下:

lib\widget\container\align.dart

/*
 * Align - 对齐方式
 */

import 'package:flutter/material.dart';

class AlignDemo extends StatelessWidget {
  const AlignDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Container(
          width: 120,
          height: 120,
          color: Colors.blue,
          child: Align(
            /// alignment - 子相对于父的对齐方式
            ///   topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight
            alignment: Alignment.topRight,
            child: Container(
              width: 40,
              height: 40,
              color: Colors.red,
            ),
          ),
        ),
        Container(
          color: Colors.blue,
          child: Align(
            /// Alignment(x, y) - 自定义对齐方式(x, y 的取值在 -1 到 1 之间)
            ///   x=0,y=0 就是居中对齐
            ///   x=-1,y=-1 就是左上对齐
            ///   x=1,y=1 就是右下对齐
            alignment: Alignment(0, -0.8),
            /// 父的宽度为 widthFactor * 子的宽度,本例为 3 * 40 = 120
            widthFactor: 3,
            /// 父的高度为 heightFactor * 子的高度,本例为 3 * 40 = 120
            heightFactor: 3,
            child: Container(
              width: 40,
              height: 40,
              color: Colors.red,
            ),
          ),
        ),
      ],
    );
  }
}

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

posted @ 2023-03-22 10:17  webabcd  阅读(21)  评论(0编辑  收藏  举报