Flutter(三) 自定义组件、MaterialApp和Scaffold的使用

1. 自定义组件

在flutter中自定义组件就是自定义一个类，这个类需要继承StatelessWidget/StatefulWidget。在flutter里面万物皆组件。把某个功能或者某个模块都可以抽离成一个组件。

• StatelessWidget 是无状态组件 状态不可变的widget 是个抽象类 需要实现里面的build方法
• StatefulWidget 是有状态组件，持有的状态可能在widget生命周期变化

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());

}
class MyApp extends StatelessWidget{
   List  _getData(){//生成20条数据
    List list = List();
    for (var i = 0; i <  20; i++) {
      list.add(
        ListTile(
        title: Text('我是第$i个cell'),
      ));
    }
  return list;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('ListView'),
            ),
            body:ListView(
              scrollDirection:  Axis.horizontal,
              padding: EdgeInsets.all(10),
              children: this._getData(),//显示数据
            ),
          ),
          theme: ThemeData(
            primaryColor: Colors.yellow,
          ),
        );
  }
}

2. MaterialApp和Scaffold组件修饰App

1. MaterialApp

   • MaterialApp是一个封装好易于使用的Widget，它封装了应有程序实现Material Design所需要的一些Widget或者说是app开发中常用的符合Material Design设计理念的入口Widget。一般作为顶层(根组件)Widget使用。
   • MaterialApp的构造方法中的参数都是可以省略的，但是官方文档也写出了至少要有home ,routes,onGenerateRoute或者builder中的一个。如果只写了routes，则必须包含Navigator.defaultRouteName()。

2. MaterialApp所有属性

   • title ：在任务管理窗口中所显示的应用名字 设备用于为用户识别应用程序的单行描述
   • home 应用默认所显示的界面 Widget
   • theme ：应用各种 UI 所使用的主题颜色 应用程序小部件使用的颜色。
   • color ： 应用的主要颜色值（primary color），也就是安卓任务管理窗口中所显示的应用颜色 在操作系统界面中应用程序使用的主色。
   • routes ： 应用的顶级导航表格，这个是多页面应用用来控制页面跳转的，类似于网页的网址 应用程序的顶级路由表
   • initialRoute ：第一个显示的路由名字，默认值为 Window.defaultRouteName 如果构建了导航器，则显示的第一个路由的名称
   • onGenerateRoute ： 生成路由的回调函数，当导航的命名路由的时候，会使用这个来生成界面 应用程序导航到指定路由时使用的路由生成器回调
   • onLocaleChanged ： 当系统修改语言的时候，会触发å这个回调
   • onUnknownRoute ：当 onGenerateRoute 无法生成路由(initialRoute除外)时调用
   • navigatorObservers ： 应用 Navigator 的监听器
   • debugShowMaterialGrid ： 是否显示 纸墨设计 基础布局网格，用来调试 UI 的工具
   • showPerformanceOverlay ： 显示性能标签，https://flutter.io/debugging/#performanceoverlay
   • checkerboardRasterCacheImages 、showSemanticsDebugger、debugShowCheckedModeBanner 各种调试开关
   • navigatorKey： 在构建导航器时使用的键。
   • navigatorObservers = const []： 为该应用程序创建的导航器的观察者列表
   • builder ： 用于在导航器上面插入小部件，但在由WidgetsApp小部件创建的其他小部件下面插入小部件，或用于完全替换导航器
   • onGenerateTitle ： 如果非空，则调用此回调函数来生成应用程序的标题字符串，否则使用标题。
   • locale ： 此应用程序本地化小部件的初始区域设置基于此值。
   • localizationsDelegates ： 这个应用程序本地化小部件的委托。
   • localeListResolutionCallback ：这个回调负责在应用程序启动时以及用户更改设备的区域设置时选择应用程序的区域设置。
   • supportedLocales = const [Locale('en', 'US')] ： 此应用程序已本地化的地区列表
   • localeResolutionCallback
   • debugShowMaterialGrid = false ：打开绘制基线网格材质应用程序的网格纸覆盖
   • showPerformanceOverlay = false ： 打开性能叠加
   • checkerboardRasterCacheImages = false ： 打开栅格缓存图像的棋盘格
   • checkerboardOffscreenLayers = false ： 打开渲染到屏幕外位图的图层的棋盘格
   • showSemanticsDebugger = false ： 打开显示框架报告的可访问性信息的覆盖
   • debugShowCheckedModeBanner = true ： 在选中模式下打开一个小的“DEBUG”横幅，表示应用程序处于选中模式

3. MaterialApp常用属性详细说明

   • title：这个和启动图标名字是不一样的，和当前 Activity 的名字也是不一样的。 这个 Title 是用来定义任务管理窗口界面所看到应用名字的。在原生 Android 系统中点击圆圈
   • theme：定义应用所使用的主题颜色，在纸墨设计中定义了 primaryColor、accentColor、hintColor 等颜色值。可以通过这个来指定一个 ThemeData 定义应用中每个控件的颜色。
   • color ： 定义系统中该应用的主要颜色
   • home ：这个是一个 Widget 对象，用来定义当前应用打开的时候，所显示的界面。
   • routes： 定义应用中页面跳转规则。 该对象是一个 Map。当使用 Navigator.pushNamed 来路由的时候，会在 routes 查找路由名字，然后使用 对应的 WidgetBuilder 来构造一个带有页面切换动画的 MaterialPageRoute。如果应用只有一个界面，则不用设置这个属性，使用 home 设置这个界面即可。如果 home 不为 null，当 routes 中包含 Navigator.defaultRouteName（'/'） 的时候会出错，两个都是 home 冲突了。如果所查找的路由在 routes 中不存在，则会通过 onGenerateRoute 来查找。指定默认显示的路由名字，默认值为 Window.defaultRouteName

2. Scaffold

Scaffold是Material Design布局结构的基本实现。此类提供了用于显示drawer snackbar和底部sheet的API。

• Scaffold主要属性
  • appBar - 显示在界面顶部的一个AppBar
  • body - 当前界面所显示的主要内容widget
  • drawer - 抽屉菜单控件

void main(){
  runApp(MyApp());

}
// 自定义组件
// StatelessWidget 是无状态组件 状态不可变的widget 是个抽象类 需要实现里面的build方法
// StatefulWidget 是有状态组件，持有的状态可能在widget生命周期变化
class MyApp extends StatelessWidget{
   List  _getData(){

    List list = List();
    for (var i = 0; i <  20; i++) {
      list.add(
        ListTile(
        title: Text('我是第$i个cell'),
      ));
    }
  return list;
  }
  final iconUrl = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2334534157,4285826929&fm=26&gp=0.jpg';
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
        return MaterialApp(
          theme: ThemeData(//在这可以设置主题样式
            //设置主题颜色
            primaryColor: Colors.yellow,
          ),
          home: Scaffold(
            
            //设置App顶部的AppBar
            appBar: AppBar(
              //AppBar的标题
              title: Text(
                'Flutter Demo',
                //设置文本样式
                style: TextStyle(
                  //设置文本颜色
                    color: Colors.red
                )
              ),
              //设置appbar上的图标颜色
              iconTheme: IconThemeData(color: Colors.white)
            ),
            //页面显示的元素
            body: //HBGridView(),
            ListView(
              // scrollDirection:  Axis.horizontal,
              padding: EdgeInsets.all(10),
              children: this._getData(),
            ),
            //页面底部导航栏
          bottomNavigationBar : CupertinoTabBar(
              items: [
                    
                    BottomNavigationBarItem(
                      icon: Image.network(iconUrl),
                      title: Text('data')),
                    
                    BottomNavigationBarItem(
                      icon: Image.network(iconUrl),
                      title: Text('data')),
                    
                    BottomNavigationBarItem(
                      icon: Image.network(iconUrl),
                      title: Text('data')),
                ]
              ),
            )
          );
  }

}

效果图