Flutter（17）：Material组件之Button，MaterialApp，Drawer

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 {},// 路由
• initialRoute,//初始路由
• onGenerateRoute,//生成路由
• onUnknownRoute,//位置路由
• navigatorObservers = const [],//导航的观察者
• builder,//widget的构建
• title = '',//设备用于识别用户的应用程序的单行描述。
• color,//背景颜色
• theme,//主题，用ThemeData
• locale,//app语言支持
• localizationsDelegates,//多语言代理
• localeResolutionCallback,//
• supportedLocales = const [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

Flutter（18）：Material组件之TextField

Flutter教学目录持续更新中

Github源代码持续更新中