当前位置:首页 > 技术 > 正文内容

Flutter开发之Scaffold组件快速开发APP

Lotus2022-10-30 14:44技术

Scaffold包括的属性

const Scaffold(
{Key? key,
PreferredSizeWidget? appBar,
Widget? body,
Widget? floatingActionButton,
FloatingActionButtonLocation? floatingActionButtonLocation,
FloatingActionButtonAnimator? floatingActionButtonAnimator,
List<Widget>? persistentFooterButtons,
AlignmentDirectional persistentFooterAlignment = AlignmentDirectional.centerEnd,
Widget? drawer,
DrawerCallback? onDrawerChanged,
Widget? endDrawer,
DrawerCallback? onEndDrawerChanged,
Widget? bottomNavigationBar,
Widget? bottomSheet,
Color? backgroundColor,
bool? resizeToAvoidBottomInset,
bool primary = true,
DragStartBehavior drawerDragStartBehavior = DragStartBehavior.start,
bool extendBody = false,
bool extendBodyBehindAppBar = false,
Color? drawerScrimColor,
double? drawerEdgeDragWidth,
bool drawerEnableOpenDragGesture = true,
bool endDrawerEnableOpenDragGesture = true,
String? restorationId}
)

属性的解释

appBar → PreferredSizeWidget? An app bar to display at the top of the scaffold. final backgroundColor → Color? The color of the Material widget that underlies the entire Scaffold. final body → Widget? The primary content of the scaffold. final bottomNavigationBar → Widget? A bottom navigation bar to display at the bottom of the scaffold. final bottomSheet → Widget? The persistent bottom sheet to display. final drawer → Widget? A panel displayed to the side of the body, often hidden on mobile devices. Swipes in from either left-to-right (TextDirection.ltr) or right-to-left (TextDirection.rtl) final drawerDragStartBehavior → DragStartBehavior Determines the way that drag start behavior is handled. final drawerEdgeDragWidth → double? The width of the area within which a horizontal swipe will open the drawer. final drawerEnableOpenDragGesture → bool Determines if the Scaffold.drawer can be opened with a drag gesture on mobile. final drawerScrimColor → Color? The color to use for the scrim that obscures primary content while a drawer is open. final endDrawer → Widget? A panel displayed to the side of the body, often hidden on mobile devices. Swipes in from right-to-left (TextDirection.ltr) or left-to-right (TextDirection.rtl) final endDrawerEnableOpenDragGesture → bool Determines if the Scaffold.endDrawer can be opened with a gesture on mobile. final extendBody → bool If true, and bottomNavigationBar or persistentFooterButtons is specified, then the body extends to the bottom of the Scaffold, instead of only extending to the top of the bottomNavigationBar or the persistentFooterButtons. final extendBodyBehindAppBar → bool If true, and an appBar is specified, then the height of the body is extended to include the height of the app bar and the top of the body is aligned with the top of the app bar. final floatingActionButton → Widget? A button displayed floating above body, in the bottom right corner. final floatingActionButtonAnimator → FloatingActionButtonAnimator? Animator to move the floatingActionButton to a new floatingActionButtonLocation. final floatingActionButtonLocation → FloatingActionButtonLocation? Responsible for determining where the floatingActionButton should go. final hashCode → int The hash code for this object. @nonVirtual, read-only, inherited key → Key? Controls how one widget replaces another widget in the tree. final, inherited onDrawerChanged → DrawerCallback? Optional callback that is called when the Scaffold.drawer is opened or closed. final onEndDrawerChanged → DrawerCallback? Optional callback that is called when the Scaffold.endDrawer is opened or closed. final persistentFooterAlignment → AlignmentDirectional The alignment of the persistentFooterButtons inside the OverflowBar. final persistentFooterButtons → List<Widget>? A set of buttons that are displayed at the bottom of the scaffold. final primary → bool Whether this scaffold is being displayed at the top of the screen. final resizeToAvoidBottomInset → bool? If true the body and the scaffold's floating widgets should size themselves to avoid the onscreen keyboard whose height is defined by the ambient MediaQuery's MediaQueryData.viewInsets bottom property. final restorationId → String? Restoration ID to save and restore the state of the Scaffold. final runtimeType → Type A representation of the runtime type of the object. read-only, inherited

使用

见下面的例子

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("WhatsApp"),
        elevation: 0.7,
        bottom: TabBar(
          controller: _tabController,
          indicatorColor: Colors.blue,
          tabs: <Widget>[
            Tab(icon: Icon(Icons.camera_alt)),
            Tab(text: "CHATS"),
            Tab(text: "STATUS"),
            Tab(text: "CALLS"),
          ],
        ),
        actions: <Widget>[
          Icon(Icons.search),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 5.0),
          ),
          Icon(Icons.more_vert)
        ],
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          CameraScreen(widget.cameras),
          ChatScreen(),
          StatusScreen(),
          CallsScreen(),
        ],
      ),
      floatingActionButton: showFab
          ? FloatingActionButton(
              backgroundColor: Theme.of(context).accentColor,
              child: Icon(
                Icons.add,
                color: Colors.white,
              ),
              onPressed: () => debugDumpApp(),
            )
          : null,
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        // currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }

上述代码运行起来的效果如下: image.png

原文链接

扫描二维码推送至手机访问。

版权声明:本文来源于网络,仅供学习,如侵权请联系站长删除。

本文链接:https://news.layui.org.cn/post/981.html

分享给朋友:

“Flutter开发之Scaffold组件快速开发APP” 的相关文章

详解机器学习中的数据处理(二)——特征归一化

摘要:在机器学习中,我们的数据集往往存在各种各样的问题,如果不对数据进行预处理,模型的训练和预测就难以进行。这一系列博文将介绍一下机器学习中的数据预处理问题,以\(\color{#4285f4}{U}\color{#ea4335}{C}\color{#fbbc05}{I}\)数据集为例详细介绍缺失值处理、连续特征离散化,特征归一化及离散特征的编码等问题,同时会附上处理的\(\color{#4...

#打卡不停更#家庭健康管理平台

0. 项目简介 身体健康是一切生产生活的硬性基础。健康是福,一切安好,未来才可期。为什么经常跑步体重缺还在往上飘?突发紧急情况怎么处理?在数字时代,如何更好的为人们提供健康福祉、普及健康知识?如何进一步驱动个人健康管理是的值得研究的方向。为此,我们团队打造了一个健康管理平台——家庭健康管理平台。概览如下图所示: 家庭健康助理是集健康数据测量与管理、急救设备及使用指导、疫情防控实况、日常生活建议...

路由基础之中级网络工程师企业网络架构BGP​

路由基础之中级网络工程师企业网络架构BGP​ 原理概述:​ 防火墙(英语:Firewall)技术是通过有机结合各类用于安全管理与筛选的软件和硬件设备,帮助计算机网络于其内、外网之间构建一道相对隔绝的保护屏障,以保护用户资料与信息安全性的一种技术。​ 防火墙技术的功能主要在于及时发现并处理计算机网络运行时可能存在的安全风险、数据传输等问题,其中处理措施包括隔离与保护,同时可对计算机网络安全当中的各...

Python基础(十) | Numpy详细教程

第十一章 Numpy库 ⭐本专栏旨在对Python的基础语法进行详解,精炼地总结语法中的重点,详解难点,面向零基础及入门的学习者,通过专栏的学习可以熟练掌握python编程,同时为后续的数据分析,机器学习及深度学习的代码能力打下坚实的基础。 ????本文已收录于Python基础系列专栏: Python基础系列教程 欢迎订阅,持续更新。 10.1 为什么要用Numpy 10.1.1  ...

将 N 叉树编码为二叉树

将 N 叉树编码为二叉树 作者:Grey 原文地址: 博客园:将 N 叉树编码为二叉树 CSDN:将 N 叉树编码为二叉树 题目描述 将一棵n叉树编码为一棵二叉树,并对二叉树进行解码,得到原始的n叉树。 n叉树是一棵有根树,其中每个节点的子树不超过n个。 类似地,二叉树是一棵有根树,其中每个节点的子树不超过2个。 编码/解码算法的工作方式不受限制。 您只需要确保一个n叉树可以被编码为一个二叉树,并...

用深度强化学习玩FlappyBird

摘要:学习玩游戏一直是当今AI研究的热门话题之一。使用博弈论/搜索算法来解决这些问题需要特别地进行周密的特性定义,使得其扩展性不强。使用深度学习算法训练的卷积神经网络模型(CNN)自提出以来在图像处理领域的多个大规模识别任务上取得了令人瞩目的成绩。本文是要开发一个一般的框架来学习特定游戏的特性并解决这个问题,其应用的项目是受欢迎的手机游戏Flappy Bird,控制游戏中的小鸟穿过一堆障碍物。本文...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。