Flutter：Row（水平布局），Column（垂直布局）

Row（水平布局），Column（垂直布局） 相当于 Android 中的 LinearLayout 的效果。

Row

水平布局是一种常用的布局方式，我们主要用Row组件来完成水平方向的排列，

对于 Row 来说，水平方向是主轴，垂直方向是次轴。示例代码如下：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container 布局',
      home: LayoutDemo(),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Center'),
      ),
      body: Row(
        children: <Widget>[
          Expanded(
            child: Text('左侧文本'),
          ),
          Expanded(
            child: Text('中间文本'),
          ),
          Expanded(
            child: FittedBox(
              fit: BoxFit.contain,
              child: const FlutterLogo(),
            ),
          ),
        ],
      ),
    );
  }
}

上述代码中 Expanded 使用来平分布局占用比例

上述代码效果图如下：

Column

垂直布局也是一种常用的布局方式，主要使用它来进行纵向的排列，常用属性如下：

对于 Column 来说，纵向就是其主轴，横向就是起次轴。下面是示例代码：

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Center'),
      ),
      body: Column(
        children: <Widget>[
          Text('文本--1'),
          Text('文本--2'),
          Expanded(
            child: FittedBox(
              fit: BoxFit.contain,
              child: const FlutterLogo(),
            ),
          ),
        ],
      ),
    );
  }
}

效果图如下：