Flutter 基础布局Widgets之Align

Align的作用是为了设置子child的对齐方式,一般作为其他控件的一个参数。

构造函数

const Align({
    Key key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget child
  })

相关属性如下:

  • alignment 设置对齐方向
  • widthFactor 如果非空,则将其宽度设置为子元素的宽度乘以该因子,可以大于或小于1.0,但必须是正数。
  • heightFactor 如果非空,则将其高度设置为子元素的高度乘以该因子,可以大于或小于1.0,但必须是正数。

代码demo

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(
    title: '图标按钮组件示例',
    home: LayoutDemo(),
  ),
);

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('图标按钮组件示例'),
      ),
      body: Align(
        alignment: Alignment.centerLeft,
        widthFactor: 2.0,
        heightFactor: 2.0,
        //添加图标按钮
        child: IconButton(
          //图标元素
          icon: Icon(Icons.volume_up,size: 48.0,),
          //按钮提示
          tooltip: '按下操作',
          //按下事件响应
          onPressed:(){
            print('按下操作');
          },
        ),
      ),
    );
  }
}

 

 

posted @ 2020-02-22 16:53  鸿鹄当高远  阅读(145)  评论(0编辑  收藏