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<Widget>  _getData(){//生成20条数据
    List<Widget> 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 <NavigatorObserver>[]: 为该应用程序创建的导航器的观察者列表
    • builder : 用于在导航器上面插入小部件,但在由WidgetsApp小部件创建的其他小部件下面插入小部件,或用于完全替换导航器
    • onGenerateTitle : 如果非空,则调用此回调函数来生成应用程序的标题字符串,否则使用标题。
    • locale : 此应用程序本地化小部件的初始区域设置基于此值。
    • localizationsDelegates : 这个应用程序本地化小部件的委托。
    • localeListResolutionCallback :这个回调负责在应用程序启动时以及用户更改设备的区域设置时选择应用程序的区域设置。
    • supportedLocales = const <Locale>[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<String, WidgetBuilder>。当使用 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<Widget>  _getData(){

    List<Widget> 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>[
                    
                    BottomNavigationBarItem(
                      icon: Image.network(iconUrl),
                      title: Text('data')),
                    
                    BottomNavigationBarItem(
                      icon: Image.network(iconUrl),
                      title: Text('data')),
                    
                    BottomNavigationBarItem(
                      icon: Image.network(iconUrl),
                      title: Text('data')),
                ]
              ),
            )
          );
  }

}
效果图
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容