Flutter之 Flex 布局

2020-11-11  本文已影响0人  不一样的色彩

1： 线性布局

所谓线性布局，即指沿水平或垂直方向排布子组件。Flutter中通过Row和Column来实现线性布局，类似于Android中的LinearLayout控件，Row和Column都继承Flex。

2:弹性布局（Flex）

弹性布局允许子组件按照一定比例来分配父容器空间。弹性布局的概念在其它UI系统中也都存在，如H5中的弹性盒子布局，Android中的FlexboxLayout等。Flutter中的弹性布局主要通过Flex和Expanded来配合实现。

2.1 Flex布局

Flex组件可以沿着水平或垂直方向排列子组件，如果你知道主轴方向，使用Row或Column会方便一些，因为Row和Column都继承自Flex，参数基本相同，所以能使用Flex的地方基本上都可以使用Row或Column。Flex本身功能是很强大的，它也可以和Expanded组件配合实现弹性布局。

Flex({
  ...
  @required this.direction, //弹性布局的方向, Row默认为水平方向，Column默认为垂直方向
  List<Widget> children = const <Widget>[],
})

Flex继承自MultiChildRenderObjectWidget，对应的RenderObject为RenderFlex，RenderFlex中实现了其布局算法。

Flex({
    Key key,
    @required this.direction,
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.mainAxisSize = MainAxisSize.max,
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    this.textBaseline = TextBaseline.alphabetic,
    this.clipBehavior = Clip.hardEdge,
    List<Widget> children = const <Widget>[],
  }) : assert(direction != null),
       assert(mainAxisAlignment != null),
       assert(mainAxisSize != null),
       assert(crossAxisAlignment != null),
       assert(verticalDirection != null),
       assert(crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null, 'textBaseline is required if you specify the crossAxisAlignment with CrossAxisAlignment.baseline'),
       assert(clipBehavior != null),
       super(key: key, children: children);

其中 direction是必传参数 direction是参数值是

enum Axis {
  /// Left and right.
  ///
  /// See also:
  ///
  ///  * [TextDirection], which disambiguates between left-to-right horizontal
  ///    content and right-to-left horizontal content.
  horizontal,

  /// Up and down.
  vertical,
}

Axis.horizontal == Row

Axis.vertical == Column

因为Row 和 Column看起来更形象话 所以在开发过程中使用Flex比较少。

2.1 Row

Row可以在水平方向排列其子widget。定义如下：

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 = TextBaseline.alphabetic,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.horizontal,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );
}

2.3 Column

Column可以在垂直方向排列其子组件。参数和Row一样，不同的是布局方向为垂直，主轴纵轴正好相反，读者可类比Row来理解。

实际上，Row和Column都只会在主轴方向占用尽可能大的空间，而纵轴的长度则取决于他们最大子元素的长度。

特殊情况

如果Row里面嵌套Row，或者Column里面再嵌套Column，那么只有最外面的Row或Column会占用尽可能大的空间，里面Row或Column所占用的空间为实际大小

3 主轴和纵轴

对于线性布局，有主轴和纵轴之分，如果布局是沿水平方向，那么主轴就是指水平方向，而纵轴即垂直方向；如果布局沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。在线性布局中，有两个定义对齐方式的枚举类MainAxisAlignment和CrossAxisAlignment，分别代表主轴对齐和纵轴对齐。

3.1 如果布局是水平方向的话就是row。那么主轴就是水平方向Main Axis，而纵轴即垂直方向 Cross Axis。如下图展示

主轴分布图.png

)

如果布局是竖直方向就是Column，那么那么主轴就是垂直方向Main Axis，而纵轴即水平 Cross Axis。

mainAxisAlignment 是在主轴上的排列顺序

Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
）

enum MainAxisAlignment {
  start,//从左到右（row），或者从上到下(column)
  end,//从右到左（row），或者从下到上(column)
  center,//主轴中心点对齐
  spaceBetween,//左右两边间距为0，其他元素中间平分
  spaceAround,//左右两边的间距是元素之间间距的一半
  spaceEvenly,//所有间距平均分配空间
}
从左到右（row）.png 从右到左（row）.png 主轴中心点对齐.png 左右两边间距为0，其他元素中间平分.png 左右两边的间距是元素之间间距的一半.png 所有间距平均分配空间.png

Row的特点：水平方向尽可能占据最大的位置（默认）.

Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween, 
              mainAxisSize: MainAxisSize.min,
)

enum MainAxisSize {
  min,//水平包裹
  max,//水平全部占用完毕
}
水平包裹.png 水平全部占用完毕.png

crossAxisAlignment：表示子组件在纵轴方向的对齐方式


Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween, 
              crossAxisAlignment: CrossAxisAlignment.start,
)
enum CrossAxisAlignment {
  start,//交叉轴的开始位置
  end,//交叉轴的结束位置
  center,//交叉轴的中间位置
  baseline,//基线对齐（必须要有文本才有效果，基线是针对文本而言的）
  stretch,//拉伸 先让Row最大可能占据空间，在交叉轴上的高度，拉伸到最大

}
交叉轴的开始位置.png 交叉轴的结束位置.png 交叉轴的中间位置.png 基线对齐.png

3.2 如果布局是垂直方向的话就是Column。那么主轴就是垂直方向Main Axis，而纵轴 水平方向即Cross Axis。总体和3.1理解相反操作。

上一篇下一篇

猜你喜欢

热点阅读