Flutter基本布局介绍(根据android理解解释一了一下)

最近在学习flutter,都说这个很强大,我也来看看了几点记录一下功能没有什么实际的技术描述。

Row 和 Column都是属于android里面的布局layout

Row 为水平

 Column 为垂直

mainAxisSize 属性

Row 和 Column分别占据了不同的主轴。Row 的主轴是水平的。 mainAxisSize 决定了 Row 和 Column 能够在主轴上占据多大空间。 mainAxisSize 有两个可选属性:

MainAxisSize.max(相当于全部占满父layout)
Row 和 Column 占据它们主轴上所有空间。如果子 widget 的总宽度小于主轴上的空间,它们就会充满剩余的空间。

MainAxisSize.min(相当于包含)

mainAxisAlignment 属性

当 mainAxisSize 被设为 MainAxisSize.maxRow 和 Column 将会使用额外空间来对齐它的 children。 mainAxisAlignment 属性决定了 Row 和 Column 将会在额外空间中如何对齐它的 children。 mainAxisAlignment 有以下六个可选属性:

MainAxisAlignment.start
将其 children 从主轴起点处开始对齐。 (Row 的起点在左边,Column 的起点在顶部 )

MainAxisAlignment.end
将其 children 从主轴终点处开始对齐。 (Row 的终点在右边,Column 的终点在底部 )

MainAxisAlignment.center
将其 children 置于主轴中心。

MainAxisAlignment.spaceBetween
在 children 之间平均分配额外空间。

MainAxisAlignment.spaceEvenly
在 children 之间,以及第一个 children 之前和最后一个 children 之后,平均分配额外空间。

MainAxisAlignment.spaceAround
与 MainAxisAlignment.spaceEvenly 相似,但在第一个 child 之前以及最后一个孩子之后减少了一半的空间,让其 children 之间宽度缩减一半。

crossAxisAlignment 属性

crossAxisAlignment 属性决定了 Row 和 Column 能够如何在其横轴上定位 children。 Row 的横轴是竖直的,而 Column 则是水平的, crossAxisAlignment 属性有五个可选属性:

CrossAxisAlignment.start(水平最上边,垂直最左边)
将其 children 横轴顶部对齐。 (顶部是 Row,左侧是 Column )

CrossAxisAlignment.end(水平最下边,垂直最右边)
将其 children 横轴底部对齐。 (底部是 Row,右侧是 Column )

CrossAxisAlignment.center
将其 children 横轴中心对齐。 (中间是 Row,中心是 Column )

CrossAxisAlignment.stretch
沿横轴延伸 children。 (在 Row 中是从顶至底,Column 则是从左至右 )

CrossAxisAlignment.baseline
根据 children 的基线对子节点。 (仅限Text类,并要求 textBaseline 属性设置为 TextBaseline.alphabetic

简单案例:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        BlueBox(),
        BiggerBlueBox(),
        BlueBox(),
      ],
    );
  }
}

class BlueBox extends State
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值