Flutter:对齐布局组件:Align

xiaohai 2021-08-17 08:18:04 4275人围观 标签: Flutter 
简介对齐布局组件Align是将其下子组件按照指定对齐方式布局,并根据子组件的带下调整自己的大小。

对齐布局组件Align是将其下子组件按照指定对齐方式布局,并根据子组件的带下调整自己的大小。

Align常用属性:

属性名 类型 说明
aligement FractoinalOffset或Alignment 设置位置
Align居中组件Demo

这里用到了Stack组件,不会的可以先去看下堆组件的用法。

import 'package:flutter/material.dart';

class DemoAlign extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Align(
          alignment: Alignment.topLeft,
          child: Text('左上角'),
        ),
        Align(
          alignment: FractionalOffset(0.5, 0.0),
          child: Text('顶部居中'),
        ),
        Align(
          alignment: FractionalOffset(1.0, 0.0),
          child: Text('右上角'),
        ),
        Align(
          alignment: FractionalOffset(0.0, 0.5),
          child: Text('靠左垂直居中'),
        ),
        Align(
          alignment: FractionalOffset(0.5, 0.5),
          child: Text('居中'),
        ),
        Align(
          alignment: FractionalOffset(1.0, 0.5),
          child: Text('靠右垂直居中'),
        ),
        Align(
          alignment: FractionalOffset(0.0, 1.0),
          child: Text('左下角'),
        ),
        Align(
          alignment: FractionalOffset(0.5, 1.0),
          child: Text('底部居中'),
        ),
        Align(
          alignment: FractionalOffset(1.0, 1.0),
          child: Text('右下角'),
        ),
      ],
    );
  }
}

图片alt