15-flutter-弹性布局

在 Flex 下 使用
Flex 的 direction 属性 是必选项 ，控制排列的方向（水平或竖直）
水平

1. direction: Axis.horizontal

竖直

1. direction: Axis.vertical

Flex 下的 Expanded 部件 可以设置 flex的值
如果 Flex 下还有别的 部件（例如：Container），则 Flex 会把剩余的空间按照 flex 的值 进行分配

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
// import 'package:english_words/english_words.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter12'),
        ),
        body: Flex(
          direction: Axis.horizontal,
          children: [
            Container(
              width: 50,
              height: 200,
              color: Colors.black45,
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.redAccent,
                height: 200,
              )
            ),
            Expanded(
                flex: 1,
                child: Container(
                  color: Colors.blue,
                  height: 200,
                )
            ),
            Expanded(
                flex: 1,
                child: Container(
                  color: Colors.cyanAccent,
                  height: 200,
                )
            )
          ],
        ),
      ),
    );
  }
}