Flutter persistentFooterButtons控件详解

devtools/2024/12/27 2:25:57/

在这里插入图片描述

文章目录


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/devtools/145688.html

相关文章

中关村科金海外外呼机器人如何通过大数据分析帮助跨境电商实现精准营销?

精准营销是企业提升市场竞争力、优化客户体验和实现可持续增长的关键策略。与传统的广撒网式营销不同&#xff0c;精准营销通过数据分析、人工智能和机器学习等先进技术&#xff0c;深入了解客户的偏好、行为和需求&#xff0c;从而提供高度个性化的产品和服务推荐。中关村科金…

快速理解24种设计模式

简单工厂模式 建立产品接口类&#xff0c;规定好要实现方法。 建立工厂类&#xff0c;根据传入的参数&#xff0c;实例化所需的类&#xff0c;实例化的类必须实现指定的产品类接口 创建型 单例模式Singleton 保证一个类只有一个实例&#xff0c;并提供一个访问他它的全局…

游戏引擎学习第52天

仓库 : https://gitee.com/mrxiao_com/2d_game 这节的内容相当多 回顾 在游戏中&#xff0c;实体被分为不同的类别&#xff1a;接近玩家的“高频实体”、距离较远并正在模拟的“低频实体”和不进行更新的“休眠实体”。这些实体会根据它们与玩家的距离进行处理&#xff0c;接…

机器学习-梯度下降+小批量梯度下降+数据归一化

文章目录 梯度下降小批量梯度下降多轮训练 数据归一化归一化原因损失函数等高线归一化 梯度下降 当前参数-损失函数关于参数的导数新参数&#xff0c;新参数会往损失函数减少的方向变化 小批量梯度下降 小批量梯度下降&#xff1a;每次选择部分数据计算损失率进行梯度下降 随…

Git(9)之创建新空白分支

Git(8)之创建新空白分支 Author&#xff1a;Once Day Date&#xff1a;2024年12月21日 漫漫长路有人对你微笑过嘛… 全系列文章可查看专栏: Git使用记录_Once_day的博客-CSDN博客 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xf…

学习记录2024/12/25;用C语言实现通讯录功能

test.c&#xff08;测试逻辑&#xff09; #define _CRT_SECURE_NO_WARNINGS #include "contact.h"int main() {int input 0;Contact con;InitContact(&con);void (*function[])(Contact*) { AddContact,DelContact,SearchContact,ModifyContact,ShowContact,S…

html(超文本标记语言)

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&…

PyCharm专业实验2 查找算法实现与比较

一、实验目的 本文的实验目的是对随机生成的含20个元素的列表使用至少三种不同的排序算法进行排序&#xff0c;并通过事前和事后的性能分析来比较这些算法的效率。 二、实验内容 数据准备&#xff1a; 随机生成一个包含20个元素的列表&#xff0c;元素值在1到100之间。排序算…