Flutter之Align

1、Align介绍

Align的作为一个参数，设置子child的对齐方式，比如居中，左上，右下等多个对齐方向

2、部分源码和功能

  const Align({Key key,this.alignment = Alignment.center,this.widthFactor,this.heightFactor,Widget child,}) : assert(alignment != null),assert(widthFactor == null || widthFactor >= 0.0),assert(heightFactor == null || heightFactor >= 0.0),super(key: key, child: child);

  /// 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);

我们知道最左上角的坐标是Alignment(-1.0, -1.0),中心坐标是Alignment(0.0, 0.0);然后最右下角坐标是Alignment(1.0, 1.0);

FractionalOffset对其封装了大小范围是(0~1),FractionalOffset(0, 0)对于左上角，FractionalOffset(1, 1)对于右下角，FractionalOffset(0.5, 0.5)对于中间坐标

FractionalOffset(0.5, 0.5) == Alignment(0.0,0.0) == Alignment.center

3、测试代码

测试1

  @overrideWidget build(BuildContext context) {return MaterialApp(title: 'open url',home: Scaffold(appBar: AppBar(// Here we take the value from the MyHomePage object that was created by// the App.build method, and use it to set our appbar title.title: Text('hello flutter'),),body: Align(alignment: FractionalOffset(1, 0),child: Container(color: Colors.red,width: 100,height: 100,),),),);}

测试2

  @overrideWidget build(BuildContext context) {return MaterialApp(title: 'open url',home: Scaffold(appBar: AppBar(// Here we take the value from the MyHomePage object that was created by// the App.build method, and use it to set our appbar title.title: Text('hello flutter'),),body: Align(alignment: FractionalOffset(0.5, 0),child: Text("chenyu"),),),);}
}

4、运行效果

测试1结果

项目结构如下

测试2结果

Flutter之Align相关推荐

Flutter Stack Align Positioned
Flutter Stack 层叠组件在介绍Stack 层叠组件时,顺便带上Align**和Positioned**,以及组合使用参数详解 Stack 属性说明 alignment 布局定位默认 ...
flutter嵌入HTML5页面,Flutter加载Html并实现与JS 的双向调用
2019-07-20 16:01:01 早起的年轻人阅读数 2025 收藏更多可以用来加载 Html 页面,以实现 Android 中 WebView 或者是 iOS 中的 UIWebView ...
Flutter AnimatedAlign 使用解析
在Flutter中, Align 可以用来实现 Widget的对齐排版. 在Flutter中, AnimatedAlign 可以用来实现 Widget的对齐排版变化时形成一个动画过渡,也是一种简单的动 ...
Flutter加载Html并实现与JS 的双向调用
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日提醒随时随记每日积累随心而过 [x2]各种系列的视频教程 ...
flutter入门（1）
文章目录 flutter 运行flutter项目 1.创建flutter项目 2.flutter目录 3.使用MaterialApp和Scafffold两个组件装饰App 1)MaterialApp ...
全网最全Flutter的学习文档，不可转载
Flutter学习文档-Author:Brath 由于文章内容较干,请允许Brath打一波广告- 面试记APP Github:https://github.com/Guoqing815/intervi ...
[-Flutter趣玩篇-] 出神入化的Align+动画
龙少:上一个Align玩的出神入化.现在有个需求,让一个组件以某个函数图像动起来.你说咱们要不先去找块砖头再和设计谈谈. - - 捷特: 别激动,都是成年人.多大点事,有哥在. 龙少:有什么好主意. ...
学习笔记-Flutter 布局（二）- Padding、Align、Center详解
Flutter 布局(二)- Padding.Align.Center详解本文主要介绍Flutter布局中的Padding.Align以及Center控件,详细介绍了其布局行为以及使用场景,并对源码 ...
Flutter中Stack层叠组件以及与Align、Positioned组件实现定位布局
1. Stack 组件 Stack 表示堆的意思,用此组件修饰的子组件会"堆"在一起. 常见属性: 1. alignment 对齐方式: 2. children 子组件: 代码示 ...