Flutter 多子 Widget 布局之线性布局 RowColumn

Posted 龙衣

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flutter 多子 Widget 布局之线性布局 RowColumn相关的知识，希望对你有一定的参考价值。


欢迎新关注的朋友，在这里主要分享微信小程序、Flutter、android、NodeJS相关的文章，说牛批点就是全栈技术（手动狗头）。

目前我在学 Flutter 这个框架，所以最近的文章基本都是 Flutter 相关。今年计划还会写微信小程序开发系列文章，欢迎持续关注。

主要参考：Flutter 布局（七）- Row、Column详解

线性布局 Row、Column

Flutter中通过 Row和 Column来实现线性布局，也就是水平和垂直布局。

Row

水平布局：将 children中的组件按水平摆放

源码中的字段含义如下：

 
   
   
 
    
  
    
    
  
  1. Row({
    2. 
  
    
    
  
  2.  Key key,
    3. 
  
    
    
  
  3.  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,//children在主轴方向上的对齐方式
    4. 
  
    
    
  
  4.  MainAxisSize mainAxisSize = MainAxisSize.max,// 在主轴方向占有空间的值
    5. 
  
    
    
  
  5.  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//children在交叉轴方向的对齐方式
    6. 
  
    
    
  
  6.  TextDirection textDirection,// 水平方向上的文字摆放顺序
    7. 
  
    
    
  
  7.  VerticalDirection verticalDirection = VerticalDirection.down,// 竖直方向上 children 摆放顺序
    8. 
  
    
    
  
  8.  TextBaseline textBaseline,// 文本基准线
    9. 
  
    
    
  
  9.  List<Widget> children = const <Widget>[],// 子 widget 集合
    10. 
  
    
    
  
  10.  })
    11.

每个字段又有相关的参数可设置，熟悉各个字段值的含义有助于我们快速准确使用字段。

MainAxisAlignment

MainAxisAlignment 的取值有：start,end,center,spaceBetween,spaceAround,spaceEvenly效果图如下：Flutter 多子 Widget 布局之线性布局 Row、Column

伪代码如下：

 
   
   
 
    
  
    
    
  
  1. Row(
    2. 
  
    
    
  
  2.  mainAxisAlignment: MainAxisAlignment.end,
    3. 
  
    
    
  
  3.  children: <Widget>[
    4. 
  
    
    
  
  4.  Text(" hello "),
    5. 
  
    
    
  
  5.  Text(" I am MainAxisAlignment.end "),
    6. 
  
    
    
  
  6.  ],
    7. 
  
    
    
  
  7. ),
    8.

  • start：将 children从屏幕左侧起点开始排列

  • end：将 children从屏幕右侧做起点开始排列

  • center：将 children从屏幕中间做起点开始排列

  • spaceBetween：将主轴方向上的空白区域均分，使得 children之间的空白区域相等，首尾 child都靠近首尾，没有间隙；

  • spaceAround：将主轴方向上的空白区域均分，使得 children之间的空白区域相等，但是首尾 child的空白区域为 1/2；

  • spaceEvenly：将主轴方向上的空白区域均分，使得 children之间的空白区域相等，包括首尾 child；

再来细看 spaceBetween,spaceAround,spaceEvenly 这三个字段效果图对比上面的文字描述：

Flutter 多子 Widget 布局之线性布局 Row、Column

伪代码如下：

 
   
   
 
    
  
    
    
  
  1. Row(
    2. 
  
    
    
  
  2.  mainAxisAlignment: MainAxisAlignment.spaceBetween,
    3. 
  
    
    
  
  3.  children: <Widget>[
    4. 
  
    
    
  
  4.  Text(" hello "),
    5. 
  
    
    
  
  5.  Text(" word "),
    6. 
  
    
    
  
  6.  Text(" spaceBetween "),
    7. 
  
    
    
  
  7.  ],
    8. 
  
    
    
  
  8. ),
    9.
CrossAxisAlignment

CrossAxisAlignment表示交叉轴， Row的主轴是水平方向，交叉轴暂时没想到好的示例，这里就不做图示了。

CrossAxisAlignment的取值有：baseline,center,end,start,stretch

  • baseline：在交叉轴方向，使得 children的 baseline对齐

  • center： children在交叉轴上居中展示

  • end： children在交叉轴上末尾展示

  • start： children在交叉轴上起点处展示

  • stretch：让 children填满交叉轴方向

TextDirection

水平方向上的文字（ child）摆放顺序， TextDirection 的取值有：rtl,ltr

  • rtl:文本从右向左排列

  • ltr:文本从左向右排列（默认）

效果图：Flutter 多子 Widget 布局之线性布局 Row、Column

伪代码：

 
   
   
 
    
  
    
    
  
  1. Row(
    2. 
  
    
    
  
  2.  mainAxisAlignment: MainAxisAlignment.start,
    3. 
  
    
    
  
  3.  textDirection: TextDirection.ltr,
    4. 
  
    
    
  
  4.  children: <Widget>[
    5. 
  
    
    
  
  5.  Text(" hello "),
    6. 
  
    
    
  
  6.  Text(" I am MainAxisAlignment.start "),
    7. 
  
    
    
  
  7.  ],
    8. 
  
    
    
  
  8. ),
    9.
MainAxisSize

MainAxisSize 的取值有：min,max

  • max:最大化使用主轴方向的可用空间（默认）

  • min:与max相反，是最小化使用主轴方向的可用空间

Flutter 多子 Widget 布局之线性布局 Row、Column

伪代码：

 
   
   
 
    
  
    
    
  
  1. Row(
    2. 
  
    
    
  
  2.  mainAxisAlignment: MainAxisAlignment.start,
    3. 
  
    
    
  
  3.  mainAxisSize: MainAxisSize.min,
    4. 
  
    
    
  
  4.  children: <Widget>[
    5. 
  
    
    
  
  5.  Text(" hello "),
    6. 
  
    
    
  
  6.  Text(" I am MainAxisAlignment.start "),
    7. 
  
    
    
  
  7.  ],
    8. 
  
    
    
  
  8. ),
    9.
VerticalDirection

竖直方向上（ child）摆放顺序， VerticalDirection 的取值有：up,down

  • up: 表示 Row纵轴（垂直）从上到下进行布局

  • down: 表示Row纵轴（垂直）从下到上进行布局

Column

垂直布局， Column参数和 Row一样，不同的是布局方向为垂直，主轴纵轴方向相反。

MainAxisAlignment

Column的主轴是垂直方向，交叉轴暂时没想到好的示例，这里先不介绍了。

CrossAxisAlignment

效果图如下：

伪代码：

 
   
   
 
    
  
    
    
  
  1. Column(
    2. 
  
    
    
  
  2.  crossAxisAlignment: CrossAxisAlignment.center,
    3. 
  
    
    
  
  3.  children: <Widget>[
    4. 
  
    
    
  
  4.  Text(" hello "),
    5. 
  
    
    
  
  5.  Text(" I am CrossAxisAlignment.center "),
    6. 
  
    
    
  
  6.  ],
    7. 
  
    
    
  
  7. ),
    8.

从效果图上看 stretch、baseline还是区分不了。所以再来看了效果图：

伪代码实现：

 
   
   
 
    
  
    
    
  
  1. Column(
    2. 
  
    
    
  
  2.  children: <Widget>[
    3. 
  
    
    
  
  3.  SizedBox(
    4. 
  
    
    
  
  4.  height: 30,
    5. 
  
    
    
  
  5.  ),
    6. 
  
    
    
  
  6.  Column(
    7. 
  
    
    
  
  7.  crossAxisAlignment: CrossAxisAlignment.stretch,
    8. 
  
    
    
  
  8.  children: <Widget>[
    9. 
  
    
    
  
  9.  Text(" hello "),
    10. 
  
    
    
  
  10.  Text(" I am CrossAxisAlignment.stretch "),
    11. 
  
    
    
  
  11.  ],
    12. 
  
    
    
  
  12.  ),
    13. 
  
    
    
  
  13.  SizedBox(
    14. 
  
    
    
  
  14.  height: 30,
    15. 
  
    
    
  
  15.  ),
    16. 
  
    
    
  
  16.  Column(
    17. 
  
    
    
  
  17.  crossAxisAlignment: CrossAxisAlignment.baseline,
    18. 
  
    
    
  
  18.  textBaseline: TextBaseline.alphabetic,
    19. 
  
    
    
  
  19.  children: <Widget>[
    20. 
  
    
    
  
  20.  Text(" hello "),
    21. 
  
    
    
  
  21.  Text(" I am CrossAxisAlignment.baseline "),
    22. 
  
    
    
  
  22.  ],
    23. 
  
    
    
  
  23.  ),
    24. 
  
    
    
  
  24.  ],
    25. 
  
    
    
  
  25. ));
    26.

分析一波： baseline的含义是：在交叉轴方向，使得 children的 baseline对齐。而现在是 Column组件，交叉轴默认是水平方向，并且默认的主轴方向是居中开始， 所以文字是从水平方向居中开始摆列。因此上面的效果图也就很好解释了。

stretch的含义是：让 children填满交叉轴方向，从效果图来看没毛病。

end.

看到这的可以三连（在看、评论、转发）走起了~


以上是关于Flutter 多子 Widget 布局之线性布局 RowColumn的主要内容，如果未能解决你的问题，请参考以下文章

flutter之布局Widget

Flutter 学习 布局类Widget

Flutter开发之Widget布局和页面导航

Flutter开发之Widget布局和页面导航

Flutter布局指南之深入理解BoxConstraints

Flutter 裁剪布局之 ClipRectClipRRectClipOvalClipPathCustomClipper