Flutter组件————Scaffold

devtools/2024/12/23 16:30:25/

Scaffold

Scaffold 是一个基础的可视化界面结构组件，它实现了基本的Material Design布局结构。使用 Scaffold 可以快速地搭建起包含应用栏（AppBar）、内容区域（body）、抽屉菜单（Drawer）、底部导航栏（BottomNavigationBar）等元素的界面。

参数

Scaffold 参数列表

参数名类型描述
appBarPreferredSizeWidget设置页面顶部的应用栏，通常是一个 AppBar 组件。
bodyWidget页面的主要内容区域，可以是任意类型的 widget。
floatingActionButtonWidget定义浮动按钮，通常是一个 FloatingActionButton 组件。
floatingActionButtonLocationFloatingActionButtonLocation定义浮动按钮的位置，默认为 FloatingActionButtonLocation.endFloat。
floatingActionButtonAnimatorFloatingActionButtonAnimator定义浮动按钮动画行为，默认使用 FloatingActionButtonAnimator.scaling。
drawerWidget定义侧边抽屉菜单，通常是一个 Drawer 组件。
endDrawerWidget类似于 drawer，但它位于屏幕的另一侧。
bottomNavigationBarWidget设置页面底部的导航栏，如 BottomNavigationBar。
bottomSheetWidget显示在底部的模态弹出层，通常用于临时显示信息或操作选项。
backgroundColorColor设置 Scaffold 的背景颜色。
resizeToAvoidBottomInsetbool控制是否调整 body 的大小以避免被键盘遮挡，默认值为true。
primarybool指示此 Scaffold 是否应该被视为应用程序的主要 Scaffold，影响滚动行为。
extendBodybool如果设置为 true，则 body 将延伸到 bottomNavigationBar 或 persistentFooter 下方。
extendBodyBehindAppBarbool如果设置为 true，则 body 将延伸到 appBar 下方。
persistentFooterButtonsList定义一组固定在页面底部的按钮。
drawerScrimColorColor当 Drawer 打开时，屏幕上其他部分的颜色（半透明）。
drawerEdgeDragWidthdouble定义从屏幕边缘拖动打开 Drawer 的宽度。默认情况下，整个屏幕宽度都可以触发拖动手势。
restorationIdString用于状态恢复的标识符，允许 Scaffold 在应用程序重启后恢复其状态。

内部组件使用

1.Flutter组件————AppBar
2.Flutter组件————FloatingActionButton
3.Flutter组件————BottomNavigationBar

代码示例

dart">
class MyHomePage extends StatefulWidget {const MyHomePage({super.key});@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int pageIndex = 0;//所有右侧行为按钮List<Widget> actionList = const [Icon(Icons.social_distance),SizedBox(width: 30,),Icon(Icons.cyclone),SizedBox(width: 30,),Icon(Icons.manage_accounts),SizedBox(width: 40,)];List<Widget> pageList = const [Text("首页"),Text("新增"),Text("用户"),];void floatBtnFunc() {debugPrint("点击了悬浮按钮");HapticFeedback.vibrate();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary, //背景颜色foregroundColor: const Color.fromARGB(135, 226, 5, 255),// leading: const Icon(Icons.accessibility_new_rounded), //左侧按钮title: const Text("Flutter 示例"), //标题// actions: actionList, //右侧按钮elevation: 10, //下方阴影shadowColor: const Color.fromARGB(136, 0, 225, 255), //阴影颜色centerTitle: true, // 标题是否居中（ios默认居中，Android默认居左）surfaceTintColor: const Color.fromARGB(172, 249, 128, 0), //表面颜色toolbarHeight: 50, //顶部栏高度iconTheme: const IconThemeData(size: 20, color: Color.fromARGB(207, 255, 251, 0)), //控制内部元素样式primary: true, // 是否显示主要按钮titleSpacing: 10, //标题内边距bottom: const TabBar(tabs: [Tab(icon: Icon(Icons.directions_car)),Tab(icon: Icon(Icons.directions_transit)),Tab(icon: Icon(Icons.directions_bike)),]), //顶部栏底部按钮shape: const RoundedRectangleBorder(borderRadius:BorderRadius.vertical(bottom: Radius.circular(15)) //顶部栏底部按钮样式),), //顶部栏body: Center(child: ListView(padding: const EdgeInsets.only(top: 15),children: [Row(children: [pageList[pageIndex]],)],),),floatingActionButton: FloatingActionButton(onPressed: floatBtnFunc, //点击事件tooltip: "悬浮按钮", //长按提示信息backgroundColor: Colors.blue, //背景颜色foregroundColor: Colors.white, // 内部组件颜色elevation: 10, //阴影shape: ShapeBorder.lerp(const CircleBorder(), const CircleBorder(), 0.5), //按钮形状mini: false, //是否小尺寸hoverColor: Colors.green, //悬浮颜色splashColor: Colors.yellow, //点击颜色focusColor: Colors.red, //获取焦点颜色autofocus: true, //是否自动获取焦点clipBehavior: Clip.hardEdge, //裁剪方式child: const Icon(Icons.info), // //按钮内部组件), //浮动按钮floatingActionButtonLocation:FloatingActionButtonLocation.centerDocked, //浮动按钮位置bottomNavigationBar: BottomNavigationBar(items: const <BottomNavigationBarItem>[BottomNavigationBarItem(icon: Icon(Icons.home), //图标label: "首页",  //标签tooltip: "首页",   //长按提示信息backgroundColor: Colors.blueAccent, //背景颜色activeIcon: Icon(Icons.home_filled), //选中图标),BottomNavigationBarItem(icon: Icon(Icons.add), label: "新增"),BottomNavigationBarItem(icon: Icon(Icons.verified_user), label: "用户"),], //底部导航栏currentIndex: pageIndex, //当前页面索引onTap: (index) {setState(() {pageIndex = index;});}, //点击事件type: BottomNavigationBarType.fixed, //导航栏的类型iconSize: 25,  //图标大小elevation: 20, //阴影selectedFontSize: 12, //选中字体大小unselectedFontSize: 12, //未选中字体大小selectedItemColor: Colors.blue, //选中颜色unselectedItemColor: Colors.black, //未选中颜色showUnselectedLabels: true, //是否显示未选中的标签selectedLabelStyle: const TextStyle(color: Colors.blue), //选中文本样式unselectedLabelStyle: const TextStyle(color: Colors.black), //未选中文本样式backgroundColor: const Color.fromARGB(255, 99, 255, 247),showSelectedLabels: true, //分别控制是否显示选中和未选中的标签文本，默认都是显示的),backgroundColor: Colors.white24, //背景颜色persistentFooterButtons: const [Icon(Icons.add_a_photo_outlined),Icon(Icons.add_alarm_rounded)], //底部固定按钮drawer: Drawer(child: ListView(children: const [Text("侧边栏")],),),   //左侧边栏（不可以使用appBar的leader）endDrawer:  Drawer(child: ListView(children: const [Text("右侧侧边栏")],),)  // 右侧边栏(不可以使用appBar的actions));}
}

效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


http://www.ppmy.cn/devtools/144738.html

相关文章

解决QT制作的软件，全屏显示后最小化，点击任务栏图标打开时不是全屏而是窗口状态的问题

解决QT制作的软件，全屏显示后最小化，点击任务栏图标打开时不是全屏而是窗口状态的问题

问题&#xff1a; 用QT自定义窗口写最大最小化时&#xff0c;发现从全屏切换到最小化状态&#xff0c;再从任务栏点击图标时&#xff0c;打开的窗体状态是窗口化状态而不是全屏状态。 自定义的窗体切换函数DoVideoBoxMenu_WindowState(Qt::WindowState wState)&#xff0c;根据…
阅读更多...
SonarQube 概述

SonarQube 概述

**SonarQube ** 1. SonarQube 概述 SonarQube 是一个开源的代码质量管理平台&#xff0c;广泛用于持续检查代码的质量&#xff0c;包括检测代码中的错误、漏洞和不符合最佳实践的代码。SonarQube 可以与 CI/CD 流程结合&#xff0c;自动化地对代码进行静态分析&#xff0c;帮…
阅读更多...
Rust之抽空学习系列（五）—— 所有权（上）

Rust之抽空学习系列（五）—— 所有权（上）

Rust之抽空学习系列&#xff08;五&#xff09;—— 所有权&#xff08;上&#xff09; 1、什么是所有权 所有权是确保Rust程序安全的一种机制 安全则是指程序中没有未定义的行为未定义的行为是指在执行一段代码时&#xff0c;结果不可预测且未被编程语言指定的情况Rust的基…
阅读更多...
ArcGIS计算土地转移矩阵

ArcGIS计算土地转移矩阵

在计算土地转移矩阵时&#xff0c;最常使用的方法就是在ArcGIS中将土地利用栅格数据转为矢量&#xff0c;然后采用叠加分析计算&#xff0c;但这种方法计算效率低。还有一种方法是采用ArcGIS中的栅格计算器&#xff0c;将一个年份的地类编号乘以个100或是1000再加上另一个年份的…
阅读更多...
【jvm】主要参数

【jvm】主要参数

Java 虚拟机&#xff08;JVM&#xff09;有许多参数用于控制其行为和性能&#xff0c;下面是一些 主要的 JVM 启动参数&#xff0c;这些参数通常分为以下几类&#xff1a; 内存管理相关参数 这些参数主要用来配置 JVM 的内存分配策略、堆内存、栈内存等。 -Xms 设置 JVM 启动…
阅读更多...
《计算机组成及汇编语言原理》阅读笔记：p28-p47

《计算机组成及汇编语言原理》阅读笔记：p28-p47

《计算机组成及汇编语言原理》学习第 3 天&#xff0c;p28-p47 总结&#xff0c;总计 20 页。 一、技术总结 1.Virtual Machine 2.stack 3.The fetch-execute Cycle 在控制单元(Control Unit, CU)里面有一个指令寄存器(Instruction Register, IR)和一个程序计数器(Program…
阅读更多...
Scala学习记录 递归调用 练习

Scala学习记录 递归调用 练习

斐波那契&#xff1a;
阅读更多...
嵌入的律动，科技的心跳

嵌入的律动，科技的心跳

在微观的世界中&#xff0c;有一种科技的生命以悄然无声的方式运作。它不张扬&#xff0c;却无处不在。嵌入式系统&#xff0c;正是这颗悄然跳动的科技之心。 它在汽车的引擎里点燃动力&#xff0c;让风驰电掣成为可能&#xff1b;它在智能手表中记录生命的律动&#xff0c;让…
阅读更多...
最新文章

Copyright @ 2022~2023