Flutter persistentFooterButtons控件详解

ops/2024/12/28 1:04:39/

在这里插入图片描述

文章目录


persistentFooterButtons 是 Flutter 中 Scaffold 控件的一个属性,它允许你在页面的底部固定一组持久化按钮。这些按钮通常用于执行一些页面中的常规操作,并且它们会始终显示在屏幕的底部,无论页面内容是否滚动。

persistentFooterButtons__6">1. persistentFooterButtons 的用途

persistentFooterButtons 用来放置一些常驻于页面底部的操作按钮,通常用于一些全局操作,如“提交”,“取消”,“保存”等。与 BottomNavigationBarAppBar 不同的是,这些按钮会固定在底部,并且在页面滚动时保持可见。无论用户滚动页面内容,按钮始终位于屏幕底部。

persistentFooterButtons__10">2. persistentFooterButtons 的定义

persistentFooterButtonsScaffold 控件的一个参数,它是一个 List<Widget> 类型,表示页面底部的一组按钮或控件。这些按钮可以是 ElevatedButtonTextButton 或其他任何 Widget。

persistentFooterButtons__14">3. persistentFooterButtons 的基本用法

你可以在 Scaffold 中使用 persistentFooterButtons 来定义底部固定的按钮,示例如下:

示例 1:简单的底部按钮
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Persistent Footer Buttons Example'),),body: Center(child: Text('Main Content'),),persistentFooterButtons: <Widget>[ElevatedButton(onPressed: () {print('Button 1 pressed');},child: Text('Button 1'),),ElevatedButton(onPressed: () {print('Button 2 pressed');},child: Text('Button 2'),),],),);}
}
解释:
  • 在这个例子中,我们使用 persistentFooterButtons 属性添加了两个按钮,分别是 “Button 1” 和 “Button 2”。
  • 这些按钮会固定在屏幕底部,页面内容不会影响它们的位置。

persistentFooterButtons__64">4. persistentFooterButtons 的常见用法

示例 2:使用不同的按钮类型

你可以将不同类型的按钮(如 TextButtonIconButtonFlatButton 等)放入 persistentFooterButtons 中。

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Persistent Footer Buttons with Different Buttons'),),body: Center(child: Text('Main Content'),),persistentFooterButtons: <Widget>[TextButton(onPressed: () {print('TextButton pressed');},child: Text('Text Button'),),IconButton(onPressed: () {print('IconButton pressed');},icon: Icon(Icons.add),),],),);}
}
解释:
  • 在这个例子中,persistentFooterButtons 包含了一个 TextButton 和一个 IconButton,它们会固定显示在页面的底部。
示例 3:动态改变按钮

你也可以在应用中动态改变 persistentFooterButtons 的内容。例如,可以根据某个条件或事件(如按钮点击)来更新底部按钮的显示。

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatefulWidget {_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {List<Widget> _footerButtons = [ElevatedButton(onPressed: () {print('Initial Button pressed');},child: Text('Initial Button'),),];Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Persistent Footer Buttons with Dynamic Update'),),body: Center(child: ElevatedButton(onPressed: () {setState(() {_footerButtons = [ElevatedButton(onPressed: () {print('Updated Button pressed');},child: Text('Updated Button'),),];});},child: Text('Change Footer Button'),),),persistentFooterButtons: _footerButtons,),);}
}
解释:

persistentFooterButtons__174">5. persistentFooterButtons 的特点

  • 始终显示在底部:这些按钮会固定在页面底部,不会随着页面的滚动而消失。
  • 与页面内容无关:无论页面内容有多少,persistentFooterButtons 都会显示在屏幕的最底部。
  • 可以包含任意 WidgetpersistentFooterButtons 是一个 Widget 列表,因此可以在底部放置各种类型的控件,如按钮、文本、图标等。
  • 不自动滚动persistentFooterButtons 不会随页面的内容一起滚动,它们始终处于屏幕的底部。

6. 总结

persistentFooterButtons 是一个非常实用的属性,用于在 Scaffold 的底部固定显示一组按钮或其他控件。这些按钮通常用于执行页面中的常规操作,并且它们始终显示在屏幕底部,即使页面内容滚动也不会消失。persistentFooterButtons 适用于需要用户经常交互的操作按钮,如保存、提交、取消等。

你可以使用不同类型的按钮(如 ElevatedButtonTextButtonIconButton 等),并且可以根据需要动态更新按钮内容。


结束语
Flutter是一个由Google开发的开源UI工具包,它可以让您在不同平台上创建高质量、美观的应用程序,而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧,从UI设计到性能优化,欢饮关注一起讨论学习,共同进入Flutter的精彩世界!


http://www.ppmy.cn/ops/145524.html

相关文章

【Trick】解决服务器cuda报错——RuntimeError: cuDNN error: CUDNN_STATUS_NOT_INITIALIZED

本人在服务器上训练代码时&#xff0c;遇到了以下报错&#xff1a; Traceback (most recent call last):File "/home/ubuntu/zcardvein/zzz_dataAndTrain.py", line 163, in <module>preds model(img_batch)File "/home/ubuntu/miniconda3/lib/python3.…

[实战]Docker应用自动重启

场景 Java应用&#xff0c;在凌晨定时任开始时运行一段时间后&#xff0c;会自动重启&#xff0c;导致定时任务失败。该应用使用Docker部署 分析 Docker应用运行一段时间自动重启可能的原因为容器分配的资源&#xff08;如CPU、内存&#xff09;不足&#xff0c;系统可能会杀…

docker怎么复制容器的文件到宿主机

在Docker中&#xff0c;你可以使用docker cp命令来复制文件从容器到宿主机&#xff0c;或者从宿主机到容器。以下是如何将文件从容器复制到宿主机的步骤&#xff1a; 确定容器ID或名称&#xff1a;首先&#xff0c;你需要知道你想要复制文件的容器的ID或名称。你可以使用docker…

《手写Mybatis渐进式源码实践》实践笔记(第七章 SQL执行器的创建和使用)

文章目录 第七章 SQL执行器的定义和实现背景技术背景模板模式特点结构示例代码&#xff08;Java&#xff09; 业务背景 目标设计实现工程代码类图实现步骤1.执行器的定义和实现1-1. Executor定义执行器接口1-2.BaseExecutor执行器抽象基类1-3. SimpleExecutor 简单执行器实现 2…

冰狐智能辅助使用插件化开发集成三方ocr

插件化开发&#xff08;Plugin Development&#xff09;是一种软件开发模式&#xff0c;它将一个应用程序的功能拆分为模块&#xff0c;并允许在运行时动态加载、卸载和扩展这些模块&#xff0c;以增强应用程序的功能。冰狐支持动态加载和卸载第三方插件模块&#xff0c;开发者…

Unity 战斗系统中角色UI血条设计

1:如何选取技术方案 Unity战斗系统中&#xff0c;每个角色经常会有血条与昵称。如何架构设计才高效&#xff0c;我们列举一些常用的做法: onGUI来做昵称与血条;3D世界中创建一个3D物体来做血条与昵称,然后让血条与昵称对着摄像机;基于UGUI/NGUI单独做血条与昵称的UI节点&#…

Chromium GN 目标指南 - view_example 表单示例 (八)

1. 引言 在前面的文章中&#xff0c;我们学习了如何创建计数器示例&#xff0c;了解了如何使用 Label 和 Button 控件进行交互以及更新 UI 状态。在本篇文章中&#xff0c;我们将创建一个更复杂的示例 —— 表单&#xff0c;以学习如何使用 Textfield、Combobox 和 Checkbox 等…

DocFlow票据AI自动化处理工具,提升企业票据数字化管理效能

随着全球化与信息化进程&#xff0c;企业的文件、信息、数据吞吐量不断增长&#xff0c;2020年以来&#xff0c;业务形势的变革再次加速了企业对先进的文档数字化管理解决方案需求。其中&#xff0c;票据处理始终面临着文件量大耗时、单据高度多样化、“淡旺季”周期波动性强、…