Android 开发者的 Flutter（二） —— Flutter 中的 Layout 及管理

声明：阅读该文章请确保你有 Android 开发的相关知识
这是《Android 开发者的 Flutter》系列的第二篇，如果想看上一篇请参考：
Android 开发者的 Flutter（一） —— Flutter 中的 View 及更新

如何布置 Widget？XML 布局文件在哪？

在 Android 中，您通过 XML 编写布局，但在 Flutter 中，您可以使用 Widget 树来编写布局。

这里是一个例子，你将如何在屏幕上显示一个简单的 Widget，并添加 Padding。

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text("Sample App"),
    ),
    body: new Center(
      child: new MaterialButton(
        onPressed: () {},
        child: new Text('Hello'),
        padding: new EdgeInsets.only(left: 10.0, right: 10.0),
      ),
    ),
  );
}

您可以在 Widget 目录中查看 Flutter 提供的所有布局 。

如何添加或从布局中删除组件？

在 Android 中，您可以调用 addChild() 或 removeChild() 在父级上动态添加或删除子 View。在 Flutter 中，因为 Widget 是不可变的，所以没有 addChild()。相反，您可以传递一个函数，该函数返回一个窗口 Widget 到父窗口并通过 bool 标志控制该窗口的创建。

例如，当你点击 FloatingActionButton 时，你可以在两个 Widget 之间切换 ：

import 'package:flutter/material.dart';

void main() {
  runApp(new SampleApp());
}

class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Sample App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() => new _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  // Default value for toggle
  bool toggle = true;
  void _toggle() {
    setState(() {
      toggle = !toggle;
    });
  }

  _getToggleChild() {
    if (toggle) {
      return new Text('Toggle One');
    } else {
      return new MaterialButton(onPressed: () {}, child: new Text('Toggle Two'));
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Sample App"),
      ),
      body: new Center(
        child: _getToggleChild(),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _toggle,
        tooltip: 'Update Text',
        child: new Icon(Icons.update),
      ),
    );
  }
}