Flutter实战（8）：Flutter 组件之 Row、Col

作者: Maojunhao | 来源:发表于2020-09-08 13:26 被阅读0次

1. Flex 布局

Flex 布局是一个很经典的布局方式，简单易懂，容易上手。多尝试，知道横轴纵轴的每一个属性会布局成什么样子就掌握了。

flex.png

2. 基本介绍

Row 和 Column 在 Flutter 里都是最常用的控件之一。后边示例需要用到 Container，需要了解的同学点这里。
代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. Row 详解

3.1 容器创建

为了方便大家理解，我这里以一个 container 容器作为底层容器承载 Row。然后加三个不同颜色的 Item 加入布局，来展示 Flex 不同属性效果。

优雅的编程，首先创建一个 row.dart 文件。这里我们给定父容器 container 固定大小，方便大家了解横轴，纵轴属性，大家也可以自行删掉 container 的 width 和 height，了解一下没有设置父容器时，自适应效果。

import 'package:flutter/material.dart';

class FMRowVC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            "Row",
          ),
          backgroundColor: Colors.lightBlue,
        ),
        body: Container(
          width: 350,
          height: 200,
          color: Colors.grey,
          child: _row(),
        ),
      ),
    );
  }

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

3.2 横轴（mainAxisAlignment）

3.2.1 MainAxisAlignment.start

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

main axis start.png

3.2.2 MainAxisAlignment.end

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

main axis end.png

3.2.3 MainAxisAlignment.center

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

main axis center.png

3.2.4 MainAxisAlignment.spaceBetween

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

main axis spaceBetween.png

3.2.5 MainAxisAlignment.spaceAround

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

main axis spaceAround.png

3.2.6 MainAxisAlignment.spaceEvenly

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

main axis spaceEvenly.png

3.3 纵轴（CrossAxisAlignment）

3.3.1 CrossAxisAlignment.start

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

cross axis start.png

3.3.2 CrossAxisAlignment.end

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

cross axis end.png

3.3.3 CrossAxisAlignment.center

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

cross axis center.png

3.3.4 CrossAxisAlignment.stretch

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

corss axis stretch.png

3.3.5 CrossAxisAlignment.baseline

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

出现如下报错

cross axis baseline error.png

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),),
        )
      ],
    );

cross axis baseline.jpg

4. Column 详解

其实同为 Flex 布局，Column 和 Row 大同小异，只是 Row 为横向排列 children，Column 纵向排列 children。

4.1 容器创建

为了方便大家理解，我这里以一个 container 容器作为底层容器承载 Column。然后加三个不同颜色的 Item 加入布局，来展示 Flex 不同属性效果。

优雅的编程，首先创建一个 column.dart 文件。这里我们给定父容器 container 固定大小，方便大家了解横轴，纵轴属性，大家也可以自行删掉 container 的 width 和 height，了解一下没有设置父容器时，自适应效果。

import 'package:flutter/material.dart';

class FMColumnVC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            "Column",
          ),
          backgroundColor: Colors.lightBlue,
        ),
        body: Container(
          width: 350,
          height: 350,
          color: Colors.grey,
          child: _column(),
        ),
      ),
    );
  }

  Column _column(){
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 80,
          height: 80,
          color: Colors.orange,
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.red,
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.cyan,
        )
      ],
    );
  }
}

4.2 横轴（mainAxisAlignment）

4.2.1 MainAxisAlignment.start

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

column main axis start.png

4.2.2 MainAxisAlignment.end

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

column main axis end.png

4.2.3 MainAxisAlignment.center

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

column main axis center.png

4.2.4 MainAxisAlignment.spaceBetween

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

column main axis spaceBetween.png

4.2.5 MainAxisAlignment.spaceAround

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

column main axis spaceAround.png

4.2.6 MainAxisAlignment.spaceEvenly

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

column main axis spaceEvenly.png

4.3 纵轴（crossAxisAlignment）

4.3.1 CrossAxisAlignment.start

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

column main axis end.png

4.3.2 CrossAxisAlignment.end

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

column cross axis end.png

4.3.3 CrossAxisAlignment.center

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

column cross axis center.png

4.3.4 CrossAxisAlignment.stretch

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

column cross axis stretch.png

4.3.5 CrossAxisAlignment.baseline

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

CrossAxisAlignment.baseline 不可以单独使用，需要配合 textBaseline 使用，我们加上这行可以解决报错问题。和 Row 一样，具体可以查看 3.3.5 ，不做重复描述了。

  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),),
        )
      ],
    );

column cross axis baseline.png

5.技术小结

Flex 布局是一种很经典的布局方式，多加练习不难掌握。
到这里其实大部分的页面样式都可以实现了，你可以尝试将 Row 和 Column 的 item 换成 Row 和 Column 嵌套使用，这样就可以完成多样化布局。

网友评论

本文标题：Flutter实战（8）：Flutter 组件之 Row、Col

本文链接：https://www.haomeiwen.com/subject/heulsktx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！