Android(安卓)开发者 for Flutter (2)如何布局? XML layout 文件跑哪去了?及布局中添加或删除组件
16lz
2021-01-26
如果您是从安卓转过来的 请从下面的 Android 开发者 for Flutter (1)开始看 ,有助于你的学习
如何布局? XML layout 文件跑哪去了?
在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), ), ), );}
如何在布局中添加或删除组件
在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 { // 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 android 在list view中插入一条广告
- 为开发者摆平 Android(安卓)碎片化,TestObject 融资百万美元
- 解决:eclipse导入android时工程下没有R文件的问题,以及style.xml文
- android 布局长度单位深入研究(2)
- android页面布局时定义控件ID时@id/XX和@+id/xx 有什么区别?
- Android(安卓)Studio官方文档之使用布局编辑器来设计UI界面
- Android(安卓)引导页动态添加圆点指示器
- android 上面一个listview下面一个button,让button一直处于listv
- Android5.0 下拉通知栏快捷开关的添加(必看)