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

简介: Flutter开发之Scaffold组件快速开发APP

简介

Scaffold是一个Flutter小部件,用于定义应用程序的基本布局元素,例如应用程序栏、抽屉式菜单、底部导航栏和浮动操作按钮等。它是一个方便的小部件,可以帮助您快速构建具有常见应用程序组件的布局。


常用重要属性

Scaffold小部件通常包含以下元素:


AppBar:位于页面顶部,通常用于显示应用程序名称、菜单按钮、搜索框或其他重要控件。


BottomNavigationBar:位于页面底部,通常用于允许用户切换不同的页面或功能。


Drawer:可从屏幕左侧滑动出现的侧边栏,通常用于显示应用程序的导航菜单或其他重要信息。


FloatingActionButton:一个浮动的圆形按钮,通常用于触发最常用的操作。


body:通常是应用程序中最重要的部分,它包含应用程序的实际内容,例如列表、表单、图像或其他小部件。


一个简单例子

下面是一个简单的示例,演示如何使用Scaffold来创建一个包含AppBar和body的基本布局:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

在这个例子中,我们创建了一个名为MyApp的Flutter应用程序。我们使用Scaffold小部件作为home属性的值,来定义应用程序的基本布局。我们设置了应用程序栏的标题为My App,并将页面的主体设置为一个居中对齐的文本小部件,显示Hello World!。


总之,Scaffold是一个非常有用的小部件,它可以让您快速构建具有常见应用程序组件的布局。它还提供了许多自定义选项,可以让您根据需要修改应用程序的外观和行为。


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,
      ),
    );
  }

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


555043d489c046818d86dffb63821fad.png





相关文章
|
14天前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
49 0
|
3月前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料?不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案,重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具,分析其适用场景与实际应用逻辑,为一线旅游从业者提供高效、低成本的执行参考。
|
4月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
9天前
|
JSON 自然语言处理 数据格式
使用Tabs选项卡组件快速搭建鸿蒙APP框架
ArkUI提供了很多布局组件,其中Tabs选项卡组件可以用于快速搭建鸿蒙APP框架,本文通过案例研究Tabs构建鸿蒙原生应用框架的方法和步骤。
使用Tabs选项卡组件快速搭建鸿蒙APP框架
|
19天前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
150 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
19天前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
本文介绍了UI开发中的样式复用与组件构建技术,涵盖@Extend、@Styles和@Builder的使用方法,并通过Swiper轮播、Scroll滚动、Tabs导航等常用组件实现典型界面效果,结合生肖抽卡、小米轮播、回顶按钮等案例,展示实际应用技巧。
78 0
|
19天前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二
本文介绍鸿蒙应用界面开发中的弹性布局(Flex)、绝对定位、层叠布局及ArkTS语法进阶,涵盖字符串拼接、类型转换、数组操作、条件与循环语句,并结合B站视频卡、支付宝首页等案例,深入讲解点击事件、状态管理与界面交互功能。
85 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二
|
Dart Android开发
flutter开发中的几个小技巧
我的tabBar有一个StatelessWidget小部件,其中包含2个statefulWidgets。事实是,当单击管理器以查看我的所有选项卡时(默认情况下在我的第一个选项卡上登陆),tab1小部件生成器一直被调用。
200 0
|
Android开发
flutter开发小技巧
flutter - URL出现在网站名称的位置 从Android Studio运行时:
209 0
|
容器
flutter开发小技巧
粘性标题效果 带有粘性标题的每个部分都应该是带有 SliverPinnedHeader 和 SliverList 的多条。然后将 pushPinnedChildren 设置为 true 应该会提供您正在寻找的粘性标题效果。
205 0

热门文章

最新文章

  • 1
    iOS|记一名 iOS 开发新手的前两次 App 审核经历
    160
  • 2
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    225
  • 3
    通过外部链接启动 Flutter App(详细介绍及示例)
    295
  • 4
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    232
  • 5
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    246
  • 6
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    263
  • 7
    【Azure Function】Function App门户上的Test/Run返回错误:Failed to fetch
    165
  • 8
    小游戏源码开发之可跨app软件对接是如何设计和开发的
    186
  • 9
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    650
  • 10
    PiliPala:开源项目真香,B站用户狂喜!这个开源APP竟能自定义主题+去广告?PiliPala隐藏功能大揭秘
    343