Flutter基础之多个子元素的布局Row与Column

喜欢ヅ旅行 2021-07-01 11:01 581阅读 0赞

#### 吐槽一会 ####

首先说一下`Flutter`这门语言，在2018年2月份，谷歌团队公布以来，现在的热度是超过了Facebook的RN，以前学习过一点，一个一个的view嵌套进去，后面因为不知名的某些原因给中断了，现在又重新学习了一遍`Flutter`，只能说，学过Android的可能觉得这个学起来有点小难受，嵌套的恶心，而且有很多属性都拆开来当做一个大的Widget来实现了。

话不多说，先说说今天的主题，拥有多个子元素的布局Widget，也就是Widget里含：`Chilrden`属性，一共是十个，下面就简单的列一下

#### 多个子元素的Widget ####

Row ：水平方向排列子Widget
    Column：垂直方向排列子Widget
    Stack：可以简单的让子Widget进行叠加
    IndexedStack：从一个子widget列表中显示单个孩子的Stack
    Flow：实现流式布局的Widget
    Table：表格布局的Widget
    Wrap：在水平或垂直方向多行显示子Widget
    ListBody：沿着给定的轴，顺序排列子元素
    ListView：常用的滚动Widget，在滚动方向一个接一个的显示其子Widget
    CustomMultiChildLayout：使用一个委托对多个孩子进行设置大小和定位

#### 常用的Widget（仅针对以上所列） ####

（1）Row与Column：

其中Row主要含一下方法：

Row({
        Key key,
        MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
        MainAxisSize mainAxisSize = MainAxisSize.max,
        CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
        TextDirection textDirection,
        VerticalDirection verticalDirection = VerticalDirection.down,
        TextBaseline textBaseline,
        List<Widget> children = const <Widget>[],
      }

`Key`这里我们不需要管它，`MainAxisAlignment`,`MainAxisSize`,`CrossAxisAlignment`,`textDirection`,`VerticalDirection`这几个参数都比较重要，他们可以更好的控制子控件的排列方向以及改变其起始位置。

不管Row还是Column：  
**MainAxisAlignment（主轴）就是与当前控件方向一致的轴，而CrossAxisAlignment（交叉轴）就是与当前控件方向垂直的轴**

比如Row：  
MainAxisAlignment是水平的，默认起始位置在左边，排列方向为从左至右，此时可以通过textDirection来改变MainAxisAlignment的起始位置和排列方向  
CrossAxisAlignment是垂直的，默认起始位置在中间，排列方向为从上至下，此时可以通过verticalDirection来改变CrossAxisAlignment的起始位置及排列方向

###### MainAxisAlignment的一些属性： ######

enum MainAxisAlignment {
     //将子控件放在主轴的开始位置
      start,  
       //将子控件放在主轴的结束位置
      end,
      //将子控件放在主轴的中间位置
      center,
      //将主轴空白位置进行均分，排列子元素，手尾没有空隙
      spaceBetween,
      //将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件间距为中间子控件间距的一半
      spaceAround,
      //将主轴空白区域均分，使各个子控件间距相等
      spaceEvenly,
    }

###### CrossAxisAlignment的一些属性： ######

enum CrossAxisAlignment {
     //将子控件放在交叉轴的起始位置
      start,
    
     //将子控件放在交叉轴的结束位置
      end,
    
     //将子控件放在交叉轴的中间位置
      center,
    
    //使子控件填满交叉轴
      stretch,
    
    //将子控件放在交叉轴的上，并且与基线相匹配（不常用）
      baseline,
    }

可能单纯的记上面的会有乱，记太多了反而记不过来，这时候你就点进去看下源码。  
总之：  
\*\*textDirection：\*\*是来控制水平方向的起始位置跟排列位置的，它的优先级高于`MainAxisAlignment（主轴）`与`CrossAxisAlignment（交叉轴）`，  
\*\*verticalDirection：\*\*是用来控制垂直方向的起始位置和排列方向，它的优先级高于`MainAxisAlignment（主轴）`与`CrossAxisAlignment（交叉轴）`，

然后我们再记住：  
**MainAxisAlignment（主轴）** 就是与当前控件方向一致的轴；  
**CrossAxisAlignment（交叉轴）** 就是与当前控件方向垂直的轴；

## 这样就差不多了。 ##