Flutter 基础布局Widgets之Align详解

栏目: IOS · Android · 发布时间: 5年前

内容简介:一般来说,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,
          ),
      ),
    );
  }
}
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Zero to One

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 在线格式化

在线 XML 格式化压缩工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具