水平佈局

Row控制元件即水平佈局控制元件，能夠將子控制元件水平排列。

Row子控制元件有靈活與不靈活的兩種，Row首先列出不靈活的子控制元件，減去它們的總寬度，計算還有多少可用的空間。然後Row按照Flexible.flex屬性確定的比例在可用空間中列出靈活的子控制元件。要控制靈活子控制元件,需要使用Flexible控制元件：

import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return
 
 new Scaffold(
      appBar: new AppBar(
        title: new Text('水平方向佈局'),
      ),
      body: new Row(
        children: <Widget>[
          new RaisedButton(
            onPressed: () {
              print('點選紅色按鈕事件');
            },
            color: const Color(0xffcc0000),
            child: new
 
 Text('紅色按鈕'),
          ),
          new Flexible(
            flex: 1,
            child: new RaisedButton(
              onPressed: () {
                print('點選黃色按鈕事件');
              },
              color: const Color(0xfff1c232),
              child: new Text('黃色按鈕'),
            ),
          ),
          new
 
 RaisedButton(
            onPressed: () {
              print('點選粉色按鈕事件');
            },
            color: const Color(0xffea9999),
            child: new Text('粉色按鈕'),
          ),
        ]
      ),
    );
  }
}
void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new LayoutDemo(),
    ),
  );
}

垂直佈局

Column控制元件即垂直佈局控制元件，能夠將子控制元件垂直排列。

與Row控制元件一樣，Column控制元件的子控制元件也有分靈活與不靈活的。首先Column列出不靈活的子控制元件，減去它們的總高度，計算還有多少可用空間。然後Column按照Flexible.flex屬性確定的比例在可用空間中列出靈活的子控制元件。要控制靈活子控制元件,需要使用Flexible控制元件：

import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('垂直方向佈局'),
      ),
      body: new Column(
        children: <Widget>[
          new RaisedButton(
            onPressed: () {
              print('點選紅色按鈕事件');
            },
            color: const Color(0xffcc0000),
            child: new Text('紅色按鈕'),
          ),
          new Flexible(
            flex: 1,
            child: new RaisedButton(
              onPressed: () {
                print('點選黃色按鈕事件');
              },
              color: const Color(0xfff1c232),
              child: new Text('黃色按鈕'),
            ),
          ),
          new RaisedButton(
            onPressed: () {
              print('點選粉色按鈕事件');
            },
            color: const Color(0xffea9999),
            child: new Text('粉色按鈕'),
          ),
        ]
      ),
    );
  }
}
void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new LayoutDemo(),
    ),
  );
}