【Flutter】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<> {
  @override
  Widget 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> {
  @override
  Widget 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.
  @override
  Widget 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(
                  // 设置边距 10
                  padding: 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);
}




五、 相关资源



参考资料 :


博客源码下载 :

已标记关键词 清除标记
相关推荐
<p> <strong><span style="font-size:24px;">课程简介:</span></strong><br /> <span style="font-size:18px;">历经半个多月的时间,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。</span><span></span> </p> <p> <span style="font-size:18px;">其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程!</span><span></span> </p> <p> <br /> </p> <p> <span style="font-size:24px;"><strong>核心技术栈列表</strong></span><span style="font-size:24px;"><strong>:</strong></span> </p> <p> <br /> </p> <p> <span style="font-size:18px;">值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括</span><span style="font-size:18px;">Spring Boot</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Spring MVC</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Mybatis</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Mybatis-Plus</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Shiro(</span><span style="font-size:18px;">身份认证与资源授权跟会话等等</span><span style="font-size:18px;">)</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Spring AOP</span><span style="font-size:18px;">、防止</span><span style="font-size:18px;">XSS</span><span style="font-size:18px;">攻击、防止</span><span style="font-size:18px;">SQL</span><span style="font-size:18px;">注入攻击、过滤器</span><span style="font-size:18px;">Filter</span><span style="font-size:18px;">、验证码</span><span style="font-size:18px;">Kaptcha</span><span style="font-size:18px;">、热部署插件</span><span style="font-size:18px;">Devtools</span><span style="font-size:18px;">、</span><span style="font-size:18px;">POI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Vue</span><span style="font-size:18px;">、</span><span style="font-size:18px;">LayUI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">ElementUI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">JQuery</span><span style="font-size:18px;">、</span><span style="font-size:18px;">HTML</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Bootstrap</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Freemarker</span><span style="font-size:18px;">、一键打包部署运行工具</span><span style="font-size:18px;">Wagon</span><span style="font-size:18px;">等等,如下图所示:</span><span></span> </p> <img src="https://img-bss.csdn.net/201908070402564453.png" alt="" /> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:24px;">课程内容与收益</span><span style="font-size:24px;">:</span><span></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070403452052.png" alt="" /> </p> <p> <span style="font-size:18px;">总的来说,</span><span style="font-size:18px;">本课程是一门具有很强实践性质的“项目实战”课程,即“</span><span style="font-size:18px;">企业应用员工角色权限管理平台</span><span style="font-size:18px;">”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于</span><span style="font-size:18px;">Shiro</span><span style="font-size:18px;">的资源授权实现员工</span><span style="font-size:18px;">-</span><span style="font-size:18px;">角色</span><span style="font-size:18px;">-</span><span style="font-size:18px;">操作权限、员工</span><span style="font-size:18px;">-</span><span style="font-size:18px;">角色</span><span style="font-size:18px;">-</span><span style="font-size:18px;">数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图:</span> </p> <p> <span></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070404285736.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:18px;"><strong>以下为项目整体的运行效果截图:</strong></span> <span></span> </p> <img src="https://img-bss.csdn.net/201908070404538119.png" alt="" /> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405002904.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405078322.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405172638.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405289855.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405404509.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405523495.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p style="text-align:left;"> <span style="font-size:18px;">值得一提的是,在本课程中,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:</span><span></span> </p> <img src="https://img-bss.csdn.net/201908070406328884.png" alt="" /> <p> <br /> </p>
<p> <strong><span style="background-color:#FFFFFF;color:#E53333;font-size:24px;">本页面购买不发书!!!仅为视频课购买!!!</span></strong> </p> <p> <strong><span style="color:#E53333;font-size:18px;">请务必到</span></strong><a href="https://edu.csdn.net/bundled/detail/49?utm_source=banner"><strong><span style="color:#E53333;font-size:18px;">https://edu.csdn.net/bundled/detail/49</span></strong></a><strong><span style="color:#E53333;font-size:18px;">下单购买课+书。</span></strong> </p> <p> <span style="font-size:14px;">本页面,仅为观看视频页面,如需一并购买图书,请</span><span style="font-size:14px;">务必到</span><a href="https://edu.csdn.net/bundled/detail/49?utm_source=banner"><span style="font-size:14px;">https://edu.csdn.net/bundled/detail/49</span></a><span style="font-size:14px;">下单购买课程+图书!!!</span> </p> <p> <br /> </p> <p> <span style="font-size:14px;">疯狂Python精讲课程覆盖《疯狂Python讲义》全书的主体内容。</span> </p> <span style="font-size:14px;">内容包括Python基本数据类型、Python列表、元组和字典、流程控制、函数式编程、面向对象编程、文件读写、异常控制、数据库编程、并发编程与网络编程、数据可视化分析、Python爬虫等。</span><br /> <span style="font-size:14px;"> 全套课程从Python基础开始介绍,逐步步入当前就业热点。将会带着大家从Python基础语法开始学习,为每个知识点都提供对应的代码实操、代码练习,逐步过渡到文件IO、数据库编程、并发编程、网络编程、数据分 析和网络爬虫等内容,本课程会从小案例起,至爬虫、数据分析案例终、以Python知识体系作为内在逻辑,以Python案例作为学习方式,最终达到“知行合一”。</span><br />
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页