Flutter笔记-控件2

布局控件

统计了一部分控件，做了一个表格：

widget	flutter
弹性布局	Flex
水平线性布局	Row
垂直线性布局	Column
表格布局	Table
流式布局	Flow
包裹布局	Wrap
页面视图布局	PageView
堆叠布局	Stack
索引堆叠布局	IndexedStack
可延伸容器	Expanded
容器	Container
边距容器	Padding
卡片容器	Card
对齐容器	Align
居中容器	Center
变换容器	Transform
显隐容器	Offstage
基线容器	Baseline
比例容器	AspectRatio
部分尺寸容器	FractionallySizedBox

ps: 这里的布局指的是内部可以存放多个孩子，容器只能有一个孩子

这些控件使用起来和css非常类似
我们先了解margin和padding的概念

box-model

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像

---

接下来以水平线性布局Row为例，进行说明：
先来看Row的源码：

class Row extends Flex {
  Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List children = const [],
  }) : super(
    children: children,
    key: key,
    direction: Axis.horizontal,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );
}

使用起来很简单，只需传递一个List就可以了
关于MainAxisAlignment(主要对齐方式)这个属性类似于css中的justify-content属性，其默认是居中的

MainAxisAlignment	作用	效果
start	位于容器的开始位置
end	位于容器的结束位置
center	位于容器的中心
spaceBetween	头尾无空白，各行之间均匀空白间隙
spaceAround	头尾的只有一半，各行之间均匀空白间隙
spaceEvenly	头尾和各行之间均匀空白间隙

而mainAxisSize仅2个值，当指定为MainAxisSize.min,MainAxisAlignment是无法生效的
然后是CrossAxisAlignment（纵轴方向对齐）这个属性类似于css中的align-items属性，其默认是居中的

CrossAxisAlignment	作用	效果
start	纵轴起始位置的边界紧靠住该行的侧轴起始边界
end	纵轴起始位置的边界紧靠住该行的侧轴结束边界
center	纵轴上居中放置
stretch	拉伸，尺寸尽可能接近所在行的尺寸
baseline	参与基线对齐

注：

1. Row使用stretch必须自控件没有指定实际的高度,Cloumn则对应宽度
2. Row在上一层控件（父控件）未指定宽高时，默认宽度是最大的（match_parent），高度则是适应子控件的大小（wrap_content），Column反之
3. TextDirection与MainAxisAlignment对应，VerticalDirection和CrossAxisAlignment对应
4. Expanded布局相当于android中linearLayout中的weight,可指定占有比例

---

一些其他的概念
BoxConstraints存放宽高的约束

static const double infinity = 1.0 / 0.0;
const BoxConstraints({
    this.minWidth = 0.0,
    this.maxWidth = double.infinity,
    this.minHeight = 0.0,
    this.maxHeight = double.infinity
  });

Alignment 对齐,百分比

  const Alignment(this.x, this.y)
  static const Alignment topLeft = Alignment(-1.0, -1.0);
  static const Alignment topCenter = Alignment(0.0, -1.0);
  static const Alignment topRight = Alignment(1.0, -1.0);
  static const Alignment centerLeft = Alignment(-1.0, 0.0);
  static const Alignment center = Alignment(0.0, 0.0);
  static const Alignment centerRight = Alignment(1.0, 0.0);
  static const Alignment bottomLeft = Alignment(-1.0, 1.0);
  static const Alignment bottomCenter = Alignment(0.0, 1.0);
  static const Alignment bottomRight = Alignment(1.0, 1.0);

EdgeInsets边距（Padding和Margin使用这个）

const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);

Offset偏移量，存放偏移的x，y坐标（动画移动，点击位置都用这个类）

const Offset(double dx, double dy) : super(dx, dy);

Size 尺寸，存放宽高

const Size(double width, double height) : super(width, height);

factor 比例，与子控件有关（放大或缩小）

---

小结一下
布局方面没什么好说的，多用用就会了。大部分布局都需要滚动的，这时候一般都是外层包裹一个ListView

小尾巴：文章有错误的地方请不吝指出，会及时更改