第三回：Row和Column Widget-优快云博客

本文链接：https://blog.youkuaiyun.com/talk_8/article/details/130072425

本文介绍了Flutter中的Row和Column两种基本布局Widget，用于管理x和y方向的组件排列。Row和Column包含一个Widget列表，可使用Expanded控制子组件大小，mainAxisAlignment属性调整对齐方式。示例展示了创建微信底部导航的布局代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

概念介绍
使用方法
示例代码

我们在上一章回中介绍了各种Widget,本章回中将介绍 Row和Column这两种常用的Widget，闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在上一章回中对各种Widget做了简单介绍，不过都是概念性的介绍，没有深入展开。本章回中将详细介绍Widget中的Row和Column。

Row和Column用来表示x和y方向的布局，它们用来在x和y方向中包含其它的Widget,甚至是嵌套自己。注意：它们包含的是一个Widget列表，而不是一个单独的Widget.

使用方法

Row和Column本质上是类，该类提供了相应的变量，我们只需要在类的构造方法中给变量赋值就可以达到想要的效果。下面是常用的变量：

children变量用来存放其它Widget,这里的widget是必须是多个widget;
在children变量中可以嵌套Expanded widget,它用来控制其它widget的大小；
mainAxisAlignment变量用来控制多个widget在x或者y方向上的对齐方式；

示例代码

    Widget wechatBottom = Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Expanded(
          child: Column(
            children: const [
              Icon(Icons.chat),
              Text("Contact"),
            ],
          ),
        ),
        Expanded(
          child: Column(
            children:const [
              Icon(Icons.contacts),
              Text("WeChat"),
            ],
          ),
        ),
        Expanded(
            child: Column(
          children: const[
            Icon(Icons.shutter_speed),
            Text("Around"),
          ],
        )),
        Expanded(
          child: Column(
            children:const [
              Icon(Icons.person),
              Text("My self"),
           ],
          )
        ),
      ],
    );

在上面的代码中，我们使用Row包含了四个Column，每个Column中包含一个图标和文本。这四个列的对齐方式为均匀分布在整行中，这个是通过mainAxisAlignment变量控制的，其实把它去掉也可以，因为在列中使用了Expanded widgest.把上面的widget放到MaterialApp中就可以运行了，下面是完整的代码：

void main() {
  runApp(HelloApp());
}

class HelloApp extends StatelessWidget {
  const HelloApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    Widget wechatBottom = Row(
      //参考上面的代码
    );

    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primaryColor: Colors.blue),
        home: Scaffold(
            appBar: AppBar(
              title: const Text("Title of Hello App"),
            ),
            body: Column(
              children: [
                wechatBottom,
              ],
            )));
  }
}