内容简介:MaterialApp是我们使用 Flutter开发中最常用的符合
1 MaterialApp
1.1 什么是MaterialApp?
MaterialApp是我们使用 Flutter开发中最常用的符合 Material Design 设计理念的入口Widget。你可以将它类比成为网页中的 <html></html>
,且它自带路由、主题色, <title>
等功能。
1.2 MaterialApp的几个属性
1.2.1 title
Strig
类型,该属性会在 Android
应用管理器的App上方显示,对于 iOS
设备是没有效果的。如下面代码所示:
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: '一个Flutter应用', home: Text('hello flutter', style: TextStyle( color: Colors.white, decoration: TextDecoration.none)))); }
1.2.2 home
Widget
类型,这是在应用程序正常启动时首先显示的Widget,除非指定了 initialRoute
。如果 initialRoute
显示失败,也该显示该Widget。
需要注意的是, 如果你指定了 home
属性,则在 routes
的路由表中不允许出现 /
的命名路由。
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: '一个Flutter应用', home: Center( child: Text('hello flutter', style: TextStyle( color: Colors.white, decoration: TextDecoration.none)), ))); }
1.2.3 routes
Map<String, WidgetBuilder>
类型,是应用的顶级路由表。当我们再使用 Navigator.pushNamed
进行命名路由的跳转时,会在此路表中进行查找并跳转。如果你的应用程序只有一个页面,则无需使用 routes
,直接指定 home
对应的Widget即可。
下面的例子中,定义了两个路由: /home
和 /detail
,并使用 GestureDetector
定义了点击事件已实现路由跳转:
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp(title: '一个Flutter应用', home: HomePage(), routes: { '/home': (BuildContext context) => HomePage(), '/detail': (BuildContext context) => DetailPage() })); } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: GestureDetector( onTap: () { Navigator.pushNamed(context, '/detail'); }, child: Text('首页,点击跳转详情页', style: TextStyle( fontSize: 20.0, color: Colors.white, decoration: TextDecoration.none)))); } } class DetailPage extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: GestureDetector( onTap: () { Navigator.pushNamed(context, '/home'); }, child: Text('详情页,点击跳转首页', style: TextStyle( fontSize: 20.0, color: Colors.white, decoration: TextDecoration.none)))); } }
2 Scaffold
2.1 什么是Scaffold?
Scaffold通常被用作MaterialApp的子Widget,它会填充可用空间,占据整个窗口或设备屏幕。Scaffold提供了大多数应用程序都应该具备的功能,例如顶部的 appBar
,底部的 bottomNavigationBar
,隐藏的侧边栏 drawer
等。
2.2 Scaffold的几个属性
2.2.1 appBar
PreferredSizeWidget
类型,显示在Scaffold的顶部区域。
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: '一个Flutter应用', home: Scaffold( appBar: AppBar( title: Text('首页')) ) ) ); }
2.2.2 drawer
Widget drawer
类型,通常用来形成一个汉堡包按钮显示其侧边栏。
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: '一个Flutter应用', home: Scaffold( appBar: AppBar(title: Text('首页')), drawer: Drawer( child: Column( children: <Widget>[ DrawerItem(1, '列表1'), DrawerItem(2, '列表2'), DrawerItem(3, '列表3'), DrawerItem(4, '列表4'), DrawerItem(5, '列表5') ], ))))); } class DrawerItem extends StatelessWidget { final int id; final String name; DrawerItem(this.id, this.name); @override Widget build(BuildContext context) { return Container( decoration: BoxDecoration( color: Colors.white, border: Border(bottom: BorderSide(width: 0.5, color: Color(0xFFd9d9d9))), ), height: 52.0, child: FlatButton( onPressed: () {}, child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[Text(id.toString()), Text(' - '), Text(name)], )), ); } }
2.2.3 bottomNavigationBar
Widget bottomNavigationBar
类型,用户显示底部的tab栏, items
必须大于2个。
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: '一个Flutter应用', home: Scaffold( appBar: AppBar( title: Text('首页'), ), bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, currentIndex: 1, items: [ new BottomNavigationBarItem( icon: Icon(Icons.account_balance), title: Text('银行')), new BottomNavigationBarItem( icon: Icon(Icons.contacts), title: Text('联系人')), new BottomNavigationBarItem( icon: Icon(Icons.library_music), title: Text('音乐')) ], )))); }
2.2.4 body
Widget
类型,Scaffold的主题内容。
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: '一个Flutter应用', home: Scaffold( appBar: AppBar( title: Text('首页'), ), bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, currentIndex: 1, items: [ new BottomNavigationBarItem( icon: Icon(Icons.account_balance), title: Text('银行')), new BottomNavigationBarItem( icon: Icon(Icons.contacts), title: Text('联系人')), new BottomNavigationBarItem( icon: Icon(Icons.library_music), title: Text('音乐')) ], ), body: Center( child: Text('这是联系人页面'), ), ))); }
以上所述就是小编给大家介绍的《Flutter Widgets入门(一):MaterialApp 和 Scaffold》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- TiDB入门(四):从入门到“跑路”
- MyBatis从入门到精通(一):MyBatis入门
- MyBatis从入门到精通(一):MyBatis入门
- Docker入门(一)用hello world入门docker
- 赵童鞋带你入门PHP(六) ThinkPHP框架入门
- 初学者入门 Golang 的学习型项目,go入门项目
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Learning PHP & MySQL中文版
车立红 / 中国电力出版社 / 2007-06 / 36.00元
《Learning PHP & MySQL中文版》将介绍程序、模板和数据库的工作原理,讲述如何应对其中的挑战,并彻底地探索这些技术。一起来看看 《Learning PHP & MySQL中文版》 这本书的介绍吧!