Flutter教学目录持续更新中

Github源代码持续更新中

想了想这三个东西就一起讲了，因为这不是基础介绍讲过了就是内容比较少，所以就一起吧。

1.Button

Material里面的Button其实在基础组件了解的时候就已经讲过了，传送门Flutter入门（9）：基础组件之Button
PopupMenuButton在基础章节Appbar中介绍过，传送门Flutter入门（11）：基础组件之AppBar

2. MaterialApp

这个一直在纠结该怎么讲，空讲知识感觉不好理解，但是要写Dome，它里面设计的东西还比较广，不是三言两语就能讲清楚的，但是呢他又的确属于Material组件，所以目前先了解下有什么属性吧，它里面的属性后面会慢慢用到的，到时候结合起来讲应该比较好理解。比如要讲onGenerateRoute，那就要先讲Route了，还要讲Navigator，这个实在太多了，后面逐步进行吧。

navigatorKey, // 导航的key
home, // 主页
routes = const <String, WidgetBuilder>{},// 路由
initialRoute,//初始路由
onGenerateRoute,//生成路由
onUnknownRoute,//位置路由
navigatorObservers = const <NavigatorObserver>[],//导航的观察者
builder,//widget的构建
title = '',//设备用于识别用户的应用程序的单行描述。
color,//背景颜色
theme,//主题，用ThemeData
locale,//app语言支持
localizationsDelegates,//多语言代理
localeResolutionCallback,//
supportedLocales = const <Locale>[Locale('en', 'US')],//支持的多语言
debugShowMaterialGrid = false,//显示网格
showPerformanceOverlay = false,//打开性能监控，覆盖在屏幕最上面
checkerboardRasterCacheImages = false,
checkerboardOffscreenLayers = false,
showSemanticsDebugger = false,//打开一个覆盖图，显示框架报告的可访问性信息显示边框
debugShowCheckedModeBanner = true,//右上角显示一个debug的图标

3.Drawer

侧滑菜单，我们在Scaffold那一章其实已经讲完了，这个是个比较简单的组件，传送门：Flutter入门（10）：基础组件之Scaffold

这里我在扩展一个组件：DrawerHeader

看名字就知道是啥了，侧滑栏头部的组件，属性也比较少，

this.decoration,
this.margin = const EdgeInsets.only(bottom: 8.0),
this.padding = const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 8.0),
this.duration = const Duration(milliseconds: 250),
this.curve = Curves.fastOutSlowIn,

1601016035202.jpg

class DrawerPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drawer'),
      ),
      body: Center(
        child: Text('body'),
      ),
      endDrawer: Drawer(
        child: Column(
          children: [
            DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Center(
                child: Text('Drawer title'),
              ),
              duration: Duration(microseconds: 3),
              curve: Curves.easeInOut,
            ),
            Container(
              child: Text('Drawer body'),
            )
          ],
        ),
      ),
    );
  }
}

下一节：Material组件之TextField