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

效果圖如下：