Flutter入门06 -- Widget之App结构和导航类

• 涉及App的结构与导航类的Widget有：MaterialApp、WidgetsApp、Scaffold、AppBar、BottomNavigationBar、BottomNavigationBarItem，TabBar、TabBarView、Drawer、SliverAppBar

MaterialApp

• Material是Google公司推行的一套设计风格，里面有很多的设计规范，比如颜色，文字的排版，响应动画与过度，填充等等；
• 在Flutter中高度集成了Material风格的Widget；
• MaterialApp此组件的构造函数如下：

const MaterialApp({
    Key key,
    this.navigatorKey,
    this.home,
    this.routes = const <String, WidgetBuilder>{},
    this.initialRoute,
    this.onGenerateRoute,
    this.onGenerateInitialRoutes,
    this.onUnknownRoute,
    this.navigatorObservers = const <NavigatorObserver>[],
    this.builder,
    this.title = '',
    this.onGenerateTitle,
    this.color,
    this.theme,
    this.darkTheme,
    this.themeMode = ThemeMode.system,
    this.locale,
    this.localizationsDelegates,
    this.localeListResolutionCallback,
    this.localeResolutionCallback,
    this.supportedLocales = const <Locale>[Locale('en', 'US')],
    this.debugShowMaterialGrid = false,
    this.showPerformanceOverlay = false,
    this.checkerboardRasterCacheImages = false,
    this.checkerboardOffscreenLayers = false,
    this.showSemanticsDebugger = false,
    this.debugShowCheckedModeBanner = true,
    this.shortcuts,
    this.actions,
})

• home：主页内容，提供一个Widget；
• routes：路由集合，类型为Map<String,WidgetBuilder>；
  • Map是一个以字符串与WidgetBuilder为键值对的HashMap；
  • 其中WidgetBuilder是页面的构造函数，Widget Function(BuildContext context)；
• initialRoute：初始路由，属于字符串类型；
• onGenerateRoute：生成路由，提供一个生成路由的函数方法；
• onUnknownRoute：未知路由，没有注册的路由，提供一个函数方法；
• navigatorObservers：导航的观察者；
• builder：widget的构建；
• title：设备用于识别用户的应用程序的单行描述；
• color：背景颜色；
• theme：主题，用ThemeData；
• locale：app语言支持；
• localizationsDelegates：多语言代理；
• localeResolutionCallback
• supportedLocales：支持的多语言；
• debugShowMaterialGrid：显示网格；
• showPerformanceOverlay：打开性能监控，覆盖在屏幕最上面；
• checkerboardRasterCacheImages
• checkerboardOffscreenLayers
• showSemanticsDebugger：打开一个覆盖图，显示框架报告的可访问性信息显示边框；
• debugShowCheckedModeBanner：控制显示右上角的一个debug图标；

Scaffold

• Scaffold 称为脚手架，是App界面的基础结构，其构造函数如下：

const Scaffold({
    Key key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer,
    this.endDrawer,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomPadding,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
    this.extendBodyBehindAppBar = false,
    this.drawerScrimColor,
    this.drawerEdgeDragWidth,
    this.drawerEnableOpenDragGesture = true,
    this.endDrawerEnableOpenDragGesture = true,
})

• appBar：显示在界面顶部的一个 AppBar，相当于导航栏，属于PreferredSizeWidget类型，是一个抽象类，其实现子类有如下：
  • AppBar
  • TabBar
  • CupertinoNavigationBar
  • CupertinoTabBar
  • TabBar
• body：当前界面所显示的主要内容；
• drawer：侧边栏控件；
• bottomNavigationBar：显示在底部的导航栏按钮栏；
• floatingActionButton：在 Material 中定义的一个功能按钮；
• persistentFooterButtons：固定在下方显示的按钮；

AppBar

• AppBar：显示在界面顶部的一个 AppBar，相当于导航栏，属于PreferredSizeWidget类型，是一个抽象类，其实现子类有如下：
  • AppBar
  • TabBar
  • CupertinoNavigationBar
  • CupertinoTabBar
  • TabBar
• 构造函数如下所示：

AppBar({
    Key key,
    this.leading,
    this.automaticallyImplyLeading = true,
    this.title,
    this.actions,
    this.flexibleSpace,
    this.bottom,
    this.elevation,
    this.shadowColor,
    this.shape,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.actionsIconTheme,
    this.textTheme,
    this.primary = true,
    this.centerTitle,
    this.excludeHeaderSemantics = false,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.toolbarOpacity = 1.0,
    this.bottomOpacity = 1.0,
    this.toolbarHeight,
})

• title：导航栏的标题文本；
• textTheme：设置导航栏上的文本样式，属于TextTheme类型；
• centerTitle：标题是否居中显示，默认值根据不同的操作系统，显示方式不一样；

BottomNavigationBar

• App底部tab栏，其构造函数如下：

BottomNavigationBar({
    Key key,
    @required this.items,
    this.onTap,
    this.currentIndex = 0,
    this.elevation,
    this.type,
    Color fixedColor,
    this.backgroundColor,
    this.iconSize = 24.0,
    Color selectedItemColor,
    this.unselectedItemColor,
    this.selectedIconTheme,
    this.unselectedIconTheme,
    this.selectedFontSize = 14.0,
    this.unselectedFontSize = 12.0,
    this.selectedLabelStyle,
    this.unselectedLabelStyle,
    this.showSelectedLabels = true,
    this.showUnselectedLabels,
    this.mouseCursor,
})

• items：底部导航栏的显示项数组，item属于BottomNavigationBarItem类型；
• onTap：点击导航栏子项时的回调；
• currentIndex：当前显示项的下标；
• type：底部导航栏的类型，有fixed和shifting两个类型，显示效果不一样；
• fixedColor：底部导航栏type为fixed时导航栏的颜色，默认使用ThemeData.primaryColor；
• iconSize：BottomNavigationBarItem icon的大小；
• backgroundColor：BottomNavigationBar的背景颜色；
• selectedFontSize：选中字体大小；
• selectedItemColor：选中字体颜色；
• selectedIconTheme: 选中Icon的主题；
• selectedLabelStyle: 选中字体的样式；
• unselectedFontSize: 未选中字体大小；
• unselectedItemColor: 未选中字体颜色；
• unselectedIconTheme: 未选中Icon的主题；
• unselectedLabelStyle: 未选中字体的样式；

BottomNavigationBarItem

• 底部tab栏的选项卡item，其构造函数如下：

const BottomNavigationBarItem({
    @required this.icon,
    this.title,
    Widget activeIcon,
    this.backgroundColor,
 })

• icon：item图片；
• title：item文本；

Drawer

• Drawer：在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏，传入 endDrawer 可以定义右侧边栏，侧边栏默认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏，属于Widget类型，我们可自定义组件设置侧边栏；