新建项目-2.png

1. Row：水平方向的线性布局
2. Column：垂直方向的线性布局

Row 和 Column 都继承自弹性布局 Flex，其实就是确定了主轴方向的 Flex，其余的用法和 Flex 一致。

Row 水平布局

Row 可以在水平方向排列其 子widget。

Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, //在主轴的对齐方式
    MainAxisSize mainAxisSize = MainAxisSize.max,  //表示主轴应该占用多大的空间
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, //在垂直方向上，子widget的对齐方式，整体偏移
    TextDirection textDirection,  //在水平方向上，子widget的排列方向
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline, //排列 子Widget 时使用哪个基线
    List<Widget> children = const <Widget>[],
  })

1. mainAxisAlignment 水平方向widget对齐方式

// 在水平方向上，子widget的对齐方式，是整体位置的偏移，靠左，居中，靠右等。只有当MainAxisSIze.max时才有意义
// mainAxisAlignment: MainAxisAlignment.start,  // 如果是TextDirection.ltr则是左对齐，rtl是右对齐

enum MainAxisAlignment {
  start,       // 如果是TextDirection.ltr则是左对齐，rtl是右对齐
  end,         // 如果是TextDirection.ltr则是右对齐，rtl是左对齐
  center,      // 居中对齐
  spaceBetween,// 屏幕与子widget之间不留空隙，子widget之间距离相等
  spaceAround, // 屏幕与子widget之间留一定空隙，子widget之间距离相等
  spaceEvenly, // 屏幕与子widget之间，子widget之间距离相等
}

RichText(
  text: TextSpan(
    children: <TextSpan>[
      TextSpan(
        text: "MainAxisAlignment.spaceEvenly\n",
        style: TextStyle(fontSize: 20,color: Colors.blue)
      ),
      TextSpan(
          text: "屏幕与子widget之间，子widget之间距离相等",
          style: TextStyle(fontSize: 15,color: Colors.blueGrey)
      ),
    ]
  ),
),
Container(
  color: Colors.amber,
  height: 150,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      Text(
        "Row1",
        style: TextStyle(
            fontSize: 20,
            color: Colors.blue
        ),
      ),
      Image.network(
        "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4032780575,3204528048&fm=26&gp=0.jpg",
        width: 100,
        height: 100,
      ),
      Text(
        "Row2",
        style: TextStyle(
            fontSize: 20,
            color: Colors.blue
        ),
      ),
      Image.network(
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1063547563,2289391090&fm=26&gp=0.jpg",
        width: 100,
        height: 100,
      ),
    ],
  ),
),

image.png image.png image.png image.png image.png image.png

2. mainAxisSize 表示主轴应该占用多大的空间

image.png image.png

3. crossAxisAlignment 在垂直方向上,子widget的对齐方式

这里记住 start、end、center 就可以

image.png image.png image.png image.png

4. textDirection

textDirection: TextDirection.ltr,//从左到右
textDirection: TextDirection.rtl,//从右到左

image.png image.png

5. verticalDirection 垂直方向的排列顺序

verticalDirection: VerticalDirection.up,  // 从下往上
verticalDirection: VerticalDirection.down,// 从上往下

image.png image.png

6. children 添加子视图组

Column

Column({
    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>[],
  })

可以看到和row是一样的.只是方向是垂直的.