Flutter开发-Layout -线性布局(Row和Column)

Flutter开发

发布日期: 2019-06-17

文章字数: 808

阅读时长: 3 分

阅读次数:

群组
Flutter,iOS,Android,Python等,闲聊工作&技术&问题;
个人主页:https://waitwalker.cn
telegram群链接:https://t.me/joinchat/Ej0o0A1ntlq5ZFIMzzO5Pw

线性布局Row和Column

线性布局可以理解为沿着水平或者垂直方向布局子Widget,Row指的是其子Widget横着排列,Column指的是其子Widget竖着排列.

主轴和纵轴

在线性布局中有主轴纵轴之分(mainAxisAlignment和crossAxisAlignment),主轴就是子Widget的排列方向,纵轴就是和其垂直的方向,例如,子Widget按照Row排列,即横着排,则其主轴就是横着方向,纵轴就是竖着方向;如果子Widget按照Column排列,即竖着排,则主轴就是竖着方向,纵轴就是横着方向.

Row

Row接口:


Row({

Key key,

MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,//主轴从哪里开始排列子Widget

MainAxisSize mainAxisSize = MainAxisSize.max,//是否尽可能占满主轴的空间

CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//纵轴上子Widget怎么对齐(上中下)

TextDirection textDirection,//文字从哪开始

VerticalDirection verticalDirection = VerticalDirection.down,//纵轴上子Widget是怎么对齐,

TextBaseline textBaseline,

List<Widget> children = const <Widget>[],//子Widget

})

我们来看一下每个属性含义:

mainAxisAlignment:表示主轴上的子Widget从哪里开始排列,从左(MainAxisAlignment.start)还是从右(MainAxisAligenment.end),还是居中(MainAxisAlignment.center);

mainAxisSize:是否占满主轴方向size,例如MainAxisSize.max是Row中的子Widget要占满屏幕的宽度;

crossAxisAlignment:垂直方向上怎么排列每个子Widget,例如,有的子Widget高度特别高,有的子Widget比较矮,矮的子Widget相对于高的子Widget是靠上面一点(CrossAxisAlignment.start)还是靠下面一点(CrossAxisAligenment.down),还是他们都居中对齐(CrossAxisAlignment.center),这个属性受verticalDirection属性约束;

基本使用:

Row(
        mainAxisAlignment: isClick ? MainAxisAlignment.end : MainAxisAlignment.start,
        crossAxisAlignment: isClick? CrossAxisAlignment.end : CrossAxisAlignment.start,
        children: <Widget>[
          Text("Flutter 1",
            style: TextStyle(
              color: Colors.blueGrey,
              backgroundColor: Colors.cyan,
              fontSize: 20,
            ),
          ),

          RaisedButton(
            child: Text("RaisedButton 1",
              style: TextStyle(fontSize: 25),
            ),
            onPressed: buttonAction,
          ),

          Text("Flutter 2",
            style: TextStyle(
              fontSize: 20,
              color: Colors.green,
              backgroundColor: Colors.yellow,
            ),
          ),
        ],
      ),

我们开始的时候让所以子Widget按照Row排列,主轴上从左边开始布局,纵轴上居上对齐:
Row 1
点击按钮后我们改变这些子Widget的布局方式,主轴从右开始布局,纵轴居下对齐:
Row 2

Column

Column布局是将其子Widget按照竖着方向排列,和Row的排列和布局是垂直关系,这里mainAxisAlignment还是子Widget从哪里开始布局,这里指的是上面,下面还是中间;corssAxisAlignment这里指的是所有子Widget靠哪边对齐,靠左还是靠右,还是居中.
基本使用:

Column(
        mainAxisAlignment: isClick ? MainAxisAlignment.center : MainAxisAlignment.start,
        crossAxisAlignment: isClick? CrossAxisAlignment.end : CrossAxisAlignment.start,
        children: <Widget>[
          Text("Flutter 1",
            style: TextStyle(
              color: Colors.blueGrey,
              backgroundColor: Colors.cyan,
              fontSize: 20,
            ),
          ),

          RaisedButton(
            child: Text("RaisedButton 1",
              style: TextStyle(fontSize: 25),
            ),
            onPressed: buttonAction,
          ),

          Text("Flutter 2",
            style: TextStyle(
              fontSize: 20,
              color: Colors.green,
              backgroundColor: Colors.yellow,
            ),
          ),
        ],
      ),

我们开始让所以子Widget按照Column排列即竖着排,子Widget的宽度长短不一,我们先让他们都靠着左边对齐:
Column 1.png