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

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

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

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

@overrideWidget 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),      ),    );  }}

Android(安卓)开发者的 Flutter（二） —— Flutter 中的 Layout 及管理

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

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

更多相关文章

随机推荐