最近在学习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.max
, Row
和 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