内容简介:一般来说,Align的使用都是其他控件的一个参数,目的是为了设置子child的对齐方式,比如居中,左上,右下等多个对齐方向,其本身用法也多灵活。即本质就是类似于语法糖将各个方向的对齐方式简单封装了下。 FractionalOffset(1, 1) 类似Alignment() 但是坐标起点是左上角,且范围为0~1 比如 FractionalOffset(0.5, 0.5) 代表中间位置
一般来说,Align的使用都是其他控件的一个参数,目的是为了设置子child的对齐方式,比如居中,左上,右下等多个对齐方向,其本身用法也多灵活。
构造函数
const Align({ Key key, this.alignment = Alignment.center, this.widthFactor, this.heightFactor, Widget child }) 复制代码
-
alignment 设置对齐方向,使有多种使用方式:
比如:
FractionalOffset(0.5, 0.5)
==Alignment(0.0,0.0)
==Alignment.center
,都是将子child居中对齐的控制方式 Alignment(0.0,0.0)表示矩形的中心。从-1.0到+1.0的距离是矩形的一边到另一边的距离。 而Alignment中还可以这样使用对齐方式的控制,也是较为常用的使用方式:
/// The top left corner. static const Alignment topLeft = Alignment(-1.0, -1.0); /// The center point along the top edge. static const Alignment topCenter = Alignment(0.0, -1.0); /// The top right corner. static const Alignment topRight = Alignment(1.0, -1.0); /// The center point along the left edge. static const Alignment centerLeft = Alignment(-1.0, 0.0); /// The center point, both horizontally and vertically. static const Alignment center = Alignment(0.0, 0.0); /// The center point along the right edge. static const Alignment centerRight = Alignment(1.0, 0.0); /// The bottom left corner. static const Alignment bottomLeft = Alignment(-1.0, 1.0); /// The center point along the bottom edge. static const Alignment bottomCenter = Alignment(0.0, 1.0); /// The bottom right corner. static const Alignment bottomRight = Alignment(1.0, 1.0); 复制代码
即本质就是类似于语法糖将各个方向的对齐方式简单封装了下。 FractionalOffset(1, 1) 类似Alignment() 但是坐标起点是左上角,且范围为0~1 比如 FractionalOffset(0.5, 0.5) 代表中间位置
- widthFactor 如果非空,则将其宽度设置为子元素的宽度乘以该因子,可以大于或小于1.0,但必须是正数。
- heightFactor 如果非空,则将其高度设置为子元素的高度乘以该因子,可以大于或小于1.0,但必须是正数。
示例代码
// align import 'package:flutter/material.dart'; class AlignLearn extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( title: Text('Align') ), // 对齐小部件 body: Align( // Alignment(0.0,0.0)表示矩形的中心。从-1.0到+1.0的距离是矩形的一边到另一边的距离。 // alignment: Alignment(1, 0), // FractionalOffset(1, 1) 类似Alignment() 但是坐标起点是左上角,且范围为0~1 比如 FractionalOffset(0.5, 0.5) 代表中间位置 alignment: Alignment.bottomRight, child: Container( color: Colors.blueAccent, width: 100, height: 100, ), ), ); } } 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Flutter布局篇(1)--水平和垂直布局详解
- FlexBox 布局详解
- FlexBox 布局详解
- Android FlexboxLayout 布局详解
- Flutter 完整开发实战详解(十六、详解自定义布局实战)
- 图文详解 Java 对象内存布局
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Zero to One
Peter Thiel、Blake Masters / Crown Business / 2014-9-16 / USD 27.00
“This book delivers completely new and refreshing ideas on how to create value in the world.” - Mark Zuckerberg, CEO of Facebook “Peter Thiel has built multiple breakthrough companies, and ......一起来看看 《Zero to One》 这本书的介绍吧!
XML 在线格式化
在线 XML 格式化压缩工具
HSV CMYK 转换工具
HSV CMYK互换工具