【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )
文章目录
- 一、StatefulWidget 组件
- 二、创建 StatefulWidget 组件
- 三、MaterialApp 组件
- 四、Scaffold 组件
- 五、 相关资源
一、StatefulWidget 组件
StatefulWidget 组件是 有状态组件 , 有如下常用的基础组件 :
- MaterialApp : 材料设计 APP 组件 , 通常用作页面的根节点 ;
- Scaffold : Flutter 封装的带有 AppBar , 底部导航栏 BottomNavigationBar , 侧边栏 的组件 , 使用该组件可以很容易实现一个复杂的导航页面 ;
- AppBar : 顶部导航栏 ;
- BottomNavigationBar : 底部导航栏 ;
- RefreshIndicator : 刷新指示器 ;
- Image : 图片组件 ;
- TextField : 输入框组件 ;
- PageView : 可滚动翻页的组件 , 类似于 Android 的 ViewPager ;
二、创建 StatefulWidget 组件
创建空的 dart 文件 StatelessWidgetPage.dart , 导入最基础的材料设计包 ,
import 'package:flutter/material.dart';
输入 stf 即可提示出 stful 代码模板 , 使用该代码模板创建一个新的 StatelessWidget 组件 ,
生成的代码模板如下 :
class extends StatefulWidget {@override_State createState() => _State();
}class _State extends State<> {@overrideWidget build(BuildContext context) {return Container();}
}
在光标停留位置 , 输入新的组件名称 , StatefulWidgetPage 名称 , 然后点击回车 , 就可以生成一个新的 StatefulWidget 组件 ;
新生成的代码如下 :
import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState();
}class _StatefulWidgetPageState extends State<StatefulWidgetPage> {@overrideWidget build(BuildContext context) {return Container();}
}
在上面的 Widget build(BuildContext context) 方法中 , 创建相关组件 ;
将上述 Widget build(BuildContext context) 方法 , 替换成上一篇博客 【Flutter】StatelessWidget 组件 ( Divider 组件 | Card 组件 | AlertDialog 组件 ) 的 build 方法 , 修改标题为 " " , 完整代码如下 :
import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState();
}class _StatefulWidgetPageState extends State<StatefulWidgetPage> {// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 20, 颜色红色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatefulWidgetPage 组件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text('StatefulWidgetPage 组件示例'),),// Container 容器使用body: Container(// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.grey),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[// Text 文本组件// textStyle 是之前创建的 TextStyle textStyle 对象Text('Container 中的 Text 文本组件示例', style: textStyle,),// Icon 图标组件Icon(Icons.map, size: 100, color: Colors.green,),// 关闭按钮CloseButton(),// 返回按钮BackButton(),// Chip 组件Chip(// Chip 组件的图标avatar: Icon(Icons.access_alarm, color: Colors.blue,),label: Text('闹钟', style: textStyle,),),// Divider 分割线组件Divider(// 设置分割线容器高度height: 20,// 分割线左侧间距indent: 20,// 设置分割线颜色color: Colors.red,),// Card 组件 : 可设置圆角 , 阴影 , 边框 等效果Card(// 设置卡片的背景颜色color: Colors.green,// 设置阴影elevation: 5,// 设置卡片的边距margin: EdgeInsets.all(10),// 设置子组件child: Container(// 设置边距 10padding: EdgeInsets.all(10),// 设置卡片文字 , 设置卡片文字样式child: Text("卡片文字", style: textStyle,),),),// AlertDialog 对话框 , 该弹窗有一个自动圆角和阴影AlertDialog(// 对话框标题title: Text("AlertDialog 对话框标题"),// 对话框内容content: Text("AlertDialog 对话框内容"),),],),),),);}
}
运行效果展示 :
三、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 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )相关推荐
- Flutter MaterialApp 和 Scaffold 组件
● MaterialApp MaterialApp 是一个方便的 widget,它封装了应用程序实现 Material Design 所需要的 一些 widget, 作为顶层 widget 使用: 那 ...
- flutter 类似日期选择器控件_一切皆组件的Flutter，安能辨我是雄雌
从一开始接触Flutter,相信读者都会铭记一句话,那就是--一切皆组件.今天我们就来体会一下这句话的神奇魔力,我们先从实际的产品需求说起. 我们先来看一个简化的运行图: 我们要实现如上图所示的日期选 ...
- vue 自定义组件 创建及其使用
vue 自定义组件 创建及其使用 1.vue 自定义组件有全局注册和局部注册两种方式: 全局注册通过 Vue.component 来创建组件,这些组件是全局注册的.也就是说它们在注册之后可以用在任何新 ...
- Vue（组件化编程：非单文件组件、单文件组件）
一.组件化编程 1. 对比传统编写与组件化编程(下面两个解释图对比可以直观了解) 传统组件编写:不同的HTML引入不同的样式和行为文件 组件方式编写:组件单独,复用率高(前提组件拆分十分细致) 理解为 ...
- 【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
文章目录 一.Flutter 组件简介 二.Flutter 自定义 StatelessWidget 组件流程 1.导入父类包 2.选择继承的父类 3.设置成员变量及构造函数 4.重写 build 方法 ...
- Flutter Scaffold组件详情配制使用
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. 本文章将详细综述Scaffold组件的属性配制 本页面中最终实现的页面效果 1 Scaffold简述 Scaffold 实现了基本的 ...
- 【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )
文章目录 ◯.Hero 构造函数 一.圆形方形组件 二.创建页面 1 的组件 ( Hero 组件 1 ) 三.创建页面 2 的组件 ( Hero 组件 2 ) 四.完整代码示例 五.相关资源 ◯.He ...
- Flutter中的Scaffold组件
概述 在开始说明Scaffold组件之前,先大致讲述一下Material Design风格.Material Design也成为纸墨设计风格,是由Google退出的全新的设计语言,这种设计语言旨在为手 ...
- Flutter 入门学习（五）— Material Design风格组件
文章目录 1. 概述 2. App结构和导航组件 2.1 MaterialApp(应用组件) 2.1.1 设置主页 2.1.2 路由处理 2.1.3 自定义主题 2.2 Scaffold(脚手架组件) ...
最新文章
- js回调与异步加载的用法
- 如何获得Oracle系统性能统计？ Oracle大型数据库系统在AIXUNIX上的实战详解 集中讨...
- 【最小费用最大流】Going Home
- fluent的udf需要c语言环境吗,[转载]FLUENT UDF 使用指导
- visual c++ 部分窗口样式设置
- oracle数据库sid已存在,Oracle SID在本机下已经存在,请指定一个不同的SID”的解决方法...
- 基于EM的多直线拟合实现及思考
- 2018中国C++大会精彩回顾
- 数组方法 包含es6
- wordpress 自定义分类url 重写_WordPress导航主题-WebStack导航主题
- html canvas 画注释框
- java成员变量注释规范_java编程规范之java注释规范
- SpringBoot和Hprose集成开发
- 连续剧网页服务器搭建,电影服务器的架设及其安全防范配置流媒体服务器 -电脑资料...
- PyMOL | Pymol绘图教程（一）
- 某程序员吐槽阿里给自己侮辱性薪资！阿里定级P6+，目前薪资33k，阿里才给35k，没有股票！...
- Java面试题大全带答案110道（持续更新）
- 什么叫单模光纤_单模光纤和多模光纤的区别是什么？英文标识分别是什么？
- 狗年大作狗文化，吉祥送进千万家！丰收、兴旺、欢乐的景象。(图集)
- 事务的传播行为propagation（讲得比较好）