Android 开发者 for Flutter （2）如何布局？ XML layout 文件跑哪去了？及布局中添加或删除组件

如果您是从安卓转过来的请从下面的 Android 开发者 for Flutter （1）开始看，有助于你的学习

如何布局？ XML layout 文件跑哪去了？
在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),
      ),
    ),
  );
}

如何在布局中添加或删除组件
在Android中，您可以从父级控件调用addChild或removeChild以动态添加或删除View。在Flutter中，因为widget是不可变的，所以没有addChild。相反，您可以传入一个函数，该函数返回一个widget给父项，并通过布尔值控制该widget的创建。

例如，当你点击一个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),
      ),
    );
  }
}

如对您有帮助，欢迎starts 谢谢。下面是我自己写的demo 可以看看一块学习：

项目源码github

您还可以看看下面的博客文章，回顾以前和继续学习，包含我在学习开发中遇到的难题等等

Flutter入门，学习历程，进入开发，在安卓手机运行起来
Visual Studio code工具开发flutte总结
Flutter 跨平台开发为什么选择Flutter
跨平台开发为什么选择Flutter
Android 开发者 for Flutter （1）Flutter和Android中的View对比及如何更新widget
Android 开发者 for Flutter （2）如何布局？ XML layout 文件跑哪去了？及布局中添加或删除组件
Android 开发者 for Flutter （3） flutter中动画是如何实现的及如何使用Canvas draw/paint
Flutter轮播图编写（两种方式）CarouselSlider和PageView（自动轮播，也可以手动左右拖拽）
flutter 中tabbar切换上下均可，banner轮播图，listview刷新添加更多，listview嵌套gridview
Flutter 项目编写第三方插件库文件引入，本地图片 json数据引入解析
flutter run 运行项目所遇到的问题总结（Scaffold加padding及 flutter/material.dart’;爆红问题解决；listview嵌套gridview滑动问题）
感谢Flutter 中文网

作者：wd_113634687
来源：CSDN
原文：https://blog.csdn.net/wdx_1136346879/article/details/88972285
版权声明：本文为博主原创文章，转载请附上博文链接！

Android 开发者 for Flutter （2）如何布局？ XML layout 文件跑哪去了？及布局中添加或删除组件

猜你喜欢