开发者社区> 韩曙亮> 正文

【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )(二)

简介: 【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )(二)
+关注继续查看

三、MaterialApp 组件


MaterialApp 组件是 材料设计 ( Material Design ) APP 组件 , 通常用作页面的根节点 ;


MaterialApp 组件是 StatefulWidget 的子类 ;


通过 MaterialApp 组件很容易实现符合 Material Design 规范的应用 ;


MaterialApp 组件中的 tittle 字段就是标题设置 , theme 字段设置的是主题 , home 字段设置的是界面的主要子组件 ; 在上述示例中


下面的代码是 MaterialApp 构造函数源码 , 其中构造函数的可选参数就是可设置的选项 :


class MaterialApp extends StatefulWidget {
  /// Creates a MaterialApp.
  ///
  /// At least one of [home], [routes], [onGenerateRoute], or [builder] must be
  /// non-null. If only [routes] is given, it must include an entry for the
  /// [Navigator.defaultRouteName] (`/`), since that is the route used when the
  /// application is launched with an intent that specifies an otherwise
  /// unsupported route.
  ///
  /// This class creates an instance of [WidgetsApp].
  ///
  /// The boolean arguments, [routes], and [navigatorObservers], must not be null.
  const MaterialApp({
    Key key,
    this.navigatorKey,
    this.home,// 主页面组件 
    this.routes = const <String, WidgetBuilder>{},
    this.initialRoute,
    this.onGenerateRoute,
    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,
  }) : assert(routes != null),
       assert(navigatorObservers != null),
       assert(title != null),
       assert(debugShowMaterialGrid != null),
       assert(showPerformanceOverlay != null),
       assert(checkerboardRasterCacheImages != null),
       assert(checkerboardOffscreenLayers != null),
       assert(showSemanticsDebugger != null),
       assert(debugShowCheckedModeBanner != null),
       super(key: key);
}





四、Scaffold 组件


Scaffold 组件是一个完整的页面组件 , 封装有 AppBar , 底部导航栏 BottomNavigationBar , 侧边栏组件 , 使用该组件可以很容易实现一个复杂的导航页面 ;



Scaffold 组件常用设置选项 :


顶部标题栏设置 : appBar ;

界面主体子组件设置 : body ;

悬浮按钮设置 : floatingActionButton ;

底部导航栏设置 : bottomNavigationBar ;

侧边栏设置 : drawer ;


Scaffold 组件构造函数源码 : 构造函数中的可选参数就是组件的可设置选项 ;


class Scaffold extends StatefulWidget {
  /// Creates a visual scaffold for material design widgets.
  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,
  }) : assert(primary != null),
       assert(extendBody != null),
       assert(extendBodyBehindAppBar != null),
       assert(drawerDragStartBehavior != null),
       super(key: key);
}




五、 相关资源


参考资料 :


Flutter 官网 : https://flutter.dev/

Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )

官方 GitHub 地址 : https://github.com/flutter

Flutter 中文社区 : https://flutter.cn/

Flutter 实用教程 : https://flutter.cn/docs/cookbook

Flutter CodeLab : https://codelabs.flutter-io.cn/

Dart 中文文档 : https://dart.cn/

Dart 开发者官网 : https://api.dart.dev/

Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/

Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )


博客源码下载 :


GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )


博客源码快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源码快照 , 可以找到本博客的源码 )


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SPRIN06_源码之核心组件接口BeanDefinition、Debug创建流程、流程图总结(六)
SPRIN06_源码之核心组件接口BeanDefinition、Debug创建流程、流程图总结(六)
17 0
使用ElementUi的table组件自定义添加升序、降序按钮和点击事件及排序
使用ElementUi的table组件自定义添加升序、降序按钮和点击事件及排序
8292 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
18557 0
几个.NET开源图表组件
推荐几个.NET开源图表组件,希望大家发行有其它的可以添加一下,说明:因为没有记录在哪里下载,所以大部分只能让大家亲自搜索一下: 1、NPlot:http://netcontrols.org/nplot/:我觉得是.NET开源轻量级中最好的:) 2、graphviz(quickgraph):这个大家可以搜索一下,功能很强大(看介绍和图片),就是没有调试通过,呵呵。
778 0
【Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )(二)
【Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )(二)
13 0
SPRIN06_源码之核心组件接口BeanDefinition、Debug创建流程、流程图总结(一)
SPRIN06_源码之核心组件接口BeanDefinition、Debug创建流程、流程图总结(一)
29 0
【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
18 0
高自定义的小程序 UI 组件库 wuss-weapp
如何使用 方法一 [推荐] (通过npm安装依赖并在小程序构建npm模块) 通过使用shell命令或git定位到当前小程序开发目录,然后使用npm或者yarn安装依赖。npm install --production wuss-weapp 或者 当依赖安装完成后即可在微信小程序开发者工具里点击 [工具] => [构建npm],此时若出现弹窗则记得吧 “使用npm模块” 勾上,若无弹窗则待构建完成后在详情里面手动勾上 “使用npm模块”。
1969 0
+关注
韩曙亮
专注 Android 领域
2605
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载