当前位置：首页 > article >正文

Flutter persistentFooterButtons控件详解

article 2024/12/28 1:48:51

在这里插入图片描述

文章目录

- - 1. `persistentFooterButtons` 的用途
  - 2. `persistentFooterButtons` 的定义
  - 3. `persistentFooterButtons` 的基本用法
  - - 示例 1：简单的底部按钮
    - 解释：
  - 4. `persistentFooterButtons` 的常见用法
  - - 示例 2：使用不同的按钮类型
    - 解释：
    - 示例 3：动态改变按钮
    - 解释：
  - 5. `persistentFooterButtons` 的特点
  - 6. 总结

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

1. `persistentFooterButtons` 的用途

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

2. `persistentFooterButtons` 的定义

persistentFooterButtons 是 Scaffold 控件的一个参数，它是一个 List<Widget> 类型，表示页面底部的一组按钮或控件。这些按钮可以是 ElevatedButton、TextButton 或其他任何 Widget。

3. `persistentFooterButtons` 的基本用法

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

示例 1：简单的底部按钮

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  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”。
这些按钮会固定在屏幕底部，页面内容不会影响它们的位置。

4. `persistentFooterButtons` 的常见用法

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

你可以将不同类型的按钮（如 TextButton、IconButton、FlatButton 等）放入 persistentFooterButtons 中。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  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 {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Widget> _footerButtons = [
    ElevatedButton(
      onPressed: () {
        print('Initial Button pressed');
      },
      child: Text('Initial Button'),
    ),
  ];

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

解释：

这个示例展示了如何根据用户的操作（点击按钮）动态更新底部按钮。
点击 “Change Footer Button” 按钮时，persistentFooterButtons 的内容会被替换为新的按钮。

5. `persistentFooterButtons` 的特点

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

6. 总结

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

你可以使用不同类型的按钮（如 ElevatedButton、TextButton、IconButton 等），并且可以根据需要动态更新按钮内容。