新建项目-9.png

一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等。如果每个路由页面都需要开发者自己手动去实现这些，这会是一件非常麻烦且无聊的事。幸运的是，Flutter Material组件库提供了一些现成的组件来减少我们的开发任务。Scaffold是一个路由页的骨架，我们使用它可以很容易地拼装出一个完整的页面。

构造函数

  1. class Scaffold extends StatefulWidget {
  2.   /// Creates a visual scaffold for material design widgets.
  3.   const Scaffold({
  4.     Key key,
  5.     this.appBar,                       //标题栏                   
  6.     this.body,                         //用于显示当前界面主要内容的Widget
  7.     this.floatingActionButton,         //悬浮在body上的按钮，默认显示在右下角
  8.     this.floatingActionButtonLocation, //用于设置floatingActionButton显示的位置
  9.     this.floatingActionButtonAnimator, //floatingActionButton移动到一个新的位置时的动画
  10.     this.persistentFooterButtons,      //多状态按钮
  11.     this.drawer,                       //左侧抽屉
  12.     this.endDrawer,                    //右侧抽屉
  13.     this.bottomNavigationBar,          //底部导航栏tabbar
  14.     this.bottomSheet,                  //显示在底部的工具栏
  15.     this.backgroundColor, 
  16.     this.resizeToAvoidBottomPadding,   //控制界面内容 body 是否重新布局来避免底部被覆盖，比如当键盘显示的时候，重新布局避免被键盘盖住内容
  17.     this.resizeToAvoidBottomInset,
  18.     this.primary = true,               //Scaffold是否显示在页面的顶部
  19.     this.drawerDragStartBehavior = DragStartBehavior.start,
  20.     this.extendBody = false,
  21.     this.extendBodyBehindAppBar = false,
  22.     this.drawerScrimColor,
  23.     this.drawerEdgeDragWidth,
  24.   })

这里先上代码，以后再整理下

image.pngimage.pngimage.png

一共五个文件.

Main

  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_app_learn/MainPage.dart';
  4. void main() => runApp(MyApp());
  6. class MyApp extends StatelessWidget {
  7.   // This widget is the root of your application.
  8.   @override
  9.   Widget build(BuildContext context) {
  10.     return MaterialApp(
  11.       theme: ThemeData(
  12.         primarySwatch: Colors.blue,
  13.       ),
  14.       home: MainPage(),
  15.     );
  16.   }
  17. }

MainPage

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  3. import 'package:flutter_app_learn/HomePage.dart';
  4. import 'package:flutter_app_learn/MinePage.dart';
  5. import 'package:flutter_app_learn/SchoolPage.dart';
  7. class MainPage extends StatefulWidget {
  8.   @override
  9.   _MainPageState createState() => _MainPageState();
  10. }
  12. class _MainPageState extends State<MainPage> {
  14.   //默认选中
  15.   int _selectedIndex = 0 ;
  16.   //所有页面
  17.   var _pageList = List();
  19.   @override
  20.   void initState() {
  21.     // TODO: implement initState
  22.     super.initState();
  23.     _pageList = [new HomePaeg(), new SchoolPage(), new MinePage()];
  24.   }
  26.   @override
  27.   Widget build(BuildContext context) {
  28.     return Scaffold(
  29.       bottomNavigationBar: BottomNavigationBar(
  30.         items: <BottomNavigationBarItem>[
  31.           BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('首页')),
  32.           BottomNavigationBarItem(icon: Icon(Icons.school),title: Text('学校')),
  33.           BottomNavigationBarItem(icon: Icon(Icons.my_location),title: Text('我的'))
  34.         ],
  35.         currentIndex: _selectedIndex,
  36.         onTap: _onTap,
  37.       ),
  38.       body: _pageList[_selectedIndex]
  39.     );
  40.   }
  42.   void _onTap(int value) {
  43.     setState(() {
  44.       _selectedIndex = value;
  45.     });
  46.   }
  48. }

Home

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  4. class HomePaeg extends StatefulWidget {
  5.   @override
  6.   _HomePaegState createState() => _HomePaegState();
  7. }
  10. class _HomePaegState extends State<HomePaeg> with SingleTickerProviderStateMixin {
  11.     //必须实现SingleTickerProviderStateMixin协议
  12.   TabController _tabController; //需要定义一个Controller
  13.   List tabs = ["北京", "济南", "上海",'济宁','天津'];
  15.   @override
  16.   void dispose() {
  17.     // TODO: implement dispose
  18.     super.dispose();
  19.   }
  21.   @override
  22.   void initState() {
  23.     // TODO: implement initState
  24.     super.initState();
  25.     _tabController = TabController(length: tabs.length, vsync: this);
  26.     //监听
  27.     _tabController.addListener( () {
  28.         var index = _tabController.index;
  29.         var previousIndex = _tabController.previousIndex;
  30.         print("index: $index");
  31.     });
  32.   }
  34.   @override
  35.   Widget build(BuildContext context) {
  36.     return Scaffold(
  37.       appBar: AppBar(
  38.         title: Text("首页"),
  39.         actions: <Widget>[
  40.           IconButton(icon: Icon(Icons.history),onPressed: () { print(111);})
  41.         ],
  42.         //导航栏底部区域
  43.         bottom: TabBar(
  44.           controller: _tabController,
  45.           tabs: tabs.map((e) => Tab(text: e)).toList()
  46.         )
  47.       ),
  48.       //抽屉效果 (右上角默认添加打开抽屉的按钮)
  49.       drawer: Drawer(
  50.         child: Container(
  51.           alignment: Alignment.center,
  52.           child: Text('Hello Drawer'),
  53.         ),
  54.       ),
  55.       body: ListView(
  56.         children: <Widget>[
  57.           ListTile(title: Text('1111111')),
  58.           Divider(color: Colors.grey, height: 0.5,),
  59.           ListTile(title: Text('1111111')),
  60.           Divider(color: Colors.grey, height: 0.5,),
  61.           ListTile(title: Text('1111111')),
  62.           Divider(color: Colors.grey, height: 0.5,),
  63.           ListTile(title: Text('1111111')),
  64.           Divider(color: Colors.grey, height: 0.5,),
  65.           ListTile(title: Text('1111111')),
  66.           Divider(color: Colors.grey, height: 0.5,),
  67.           ListTile(title: Text('1111111')),
  68.           Divider(color: Colors.grey, height: 0.5,),
  69.           ListTile(title: Text('1111111')),
  70.           Divider(color: Colors.grey, height: 0.5,),
  71.           ListTile(title: Text('1111111')),
  72.           Divider(color: Colors.grey, height: 0.5,),
  73.           ListTile(title: Text('1111111')),
  74.           Divider(color: Colors.grey, height: 0.5,),
  75.           ListTile(title: Text('1111111')),
  76.           Divider(color: Colors.grey, height: 0.5,),
  77.           ListTile(title: Text('1111111')),
  78.           Divider(color: Colors.grey, height: 0.5,),
  79.           ListTile(title: Text('1111111')),
  80.           Divider(color: Colors.grey, height: 0.5,),
  81.           ListTile(title: Text('1111111')),
  82.           Divider(color: Colors.grey, height: 0.5,),
  83.           ListTile(title: Text('1111111')),
  84.           Divider(color: Colors.grey, height: 0.5,),
  85.           ListTile(title: Text('1111111')),
  86.           Divider(color: Colors.grey, height: 0.5,),
  87.           ListTile(title: Text('1111111')),
  88.           Divider(color: Colors.grey, height: 0.5,),
  89.           ListTile(title: Text('1111111')),
  90.           Divider(color: Colors.grey, height: 0.5,),
  91.           ListTile(title: Text('1111111')),
  92.           Divider(color: Colors.grey, height: 0.5,),
  93.           ListTile(title: Text('1111111')),
  94.           Divider(color: Colors.grey, height: 0.5,),
  95.           ListTile(title: Text('1111111')),
  96.           Divider(color: Colors.grey, height: 0.5,),
  97.           ListTile(title: Text('1111111')),
  98.           Divider(color: Colors.grey, height: 0.5,),
  99.           ListTile(title: Text('1111111')),
  100.           Divider(color: Colors.grey, height: 0.5,),
  101.           ListTile(title: Text('1111111')),
  102.           Divider(color: Colors.grey, height: 0.5,),
  103.         ],
  104.       ),
  105.     );
  106.   }
  107. }

school

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  4. class SchoolPage extends StatefulWidget {
  5.   @override
  6.   _SchoolPageState createState() => _SchoolPageState();
  7. }
  9. class _SchoolPageState extends State<SchoolPage> {
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     return Scaffold(
  13.       appBar: AppBar(
  14.         title: Text("学校"),
  15.       ),
  16.       body: Container(
  17.         alignment: Alignment.center,
  18.         child: Column(
  19.           children: <Widget>[
  20.             Text('学校')
  21.           ],
  22.         ),
  23.       ),
  24.     );
  25.   }
  26. }

我和学校代码一样,文字不同.