Flutter(十四)基础控件-Row、Column布局

感君一回顾，思君朝与暮。

<一>布局介绍

image.png

<二>Row 横向布局

• 代码

  Row _row() {
    return Row(
      mainAxisAlignment : MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.yellow,
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        )
      ],
    );
  }
  

• MainAxisAlignment.start

  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  

image

• MainAxisAlignment.end

  mainAxisAlignment: MainAxisAlignment.end,
  crossAxisAlignment: CrossAxisAlignment.start,
  

image

• MainAxisAlignment.center

  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  

image

• MainAxisAlignment.spaceBetween

  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.start,
  

image

• MainAxisAlignment.spaceAround

  mainAxisAlignment: MainAxisAlignment.spaceAround,
  crossAxisAlignment: CrossAxisAlignment.start,
  

image

• MainAxisAlignment.spaceEvenly

  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.start,
  

image

• CrossAxisAlignment.start

  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  

image

• CrossAxisAlignment.end

  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.end,
  

image

• CrossAxisAlignment.center

  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.center,
  

image

• CrossAxisAlignment.stretch

  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  

image

• CrossAxisAlignment.baseline

  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.baseline,
  

  出现如下报错

image

• CrossAxisAlignment.baseline 不可以单独使用，需要配合 textBaseline 使用，我们加上这行可以解决报错问题。

  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  

• 此时报错解决了，但是没有效果。因为 baseline 属性是作用于文本的，我们在每个 Item 里均加入一个 Text 文本，看一下他们的底部对齐样式。

  Row _row(){
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: TextBaseline.alphabetic,
      children: [
        Container(
          width: 80,
          height: 80,
          color: Colors.orange,
          child: Text("测试", style: TextStyle(fontSize: 10),),
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.red,
          child: Text("测试", style: TextStyle(fontSize: 20),),
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.cyan,
          child: Text("测试", style: TextStyle(fontSize: 30),),
        )
      ],
    );
  

image

<三> Column 纵向布局

• 纵向布局同横向布局只差一个方向的不同

  Column _column() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: TextBaseline.alphabetic,
      children: [
        Container(
          width: 80,
          height: 80,
          color: Colors.orange,
          child: Text("测试", style: TextStyle(fontSize: 10),),
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.red,
          child: Text("测试", style: TextStyle(fontSize: 20),),
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.cyan,
          child: Text("测试", style: TextStyle(fontSize: 30),),
        )
      ],
    );
  }
  

image.png