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 @   鸿鹄当高远  阅读(570)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 字符编码:从基础到乱码解决
历史上的今天:
2016-02-22 iOS AutoLayout的用法
2016-02-22 iOS AppStore 申请加急审核
点击右上角即可分享
微信分享提示