如何在 Flutter 的所有页面上显示浮动按钮？

Question

我想在 Flutter 中继续显示浮动按钮或小部件，即使页面被 Navigator.of(context).push() 更改，就像放在底部的迷你音乐播放器一样。

我该如何实现？？

Answer 1

您可以将脚手架提取为包含底部工作表的布局，并在您构建的每个页面中使用此布局，并传入标题、正文等，以便底部工作表在所有页面中保持不变。片段如下。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Persistent Bottom Sheet',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.dark,
      ),
      initialRoute: "/",
      routes: {
        "/": (context) => Home(),
        "/library": (context) => Library(),
      },
    );
  }
}

class Home extends StatelessWidget {
  Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Layout(
      title: "Home",
      body: Center(
        child: Text("Home"),
      ),
      actions: <Widget>[
        InkWell(
          onTap: () {
            Navigator.of(context).pushNamed("/library");
          },
          child: Tooltip(
            message: "Go To Library",
            child: Padding(
              padding: const EdgeInsets.all(12),
              child: Icon(Icons.library_music),
            ),
          ),
        )
      ],
    );
  }
}

class Library extends StatelessWidget {
  Library({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Layout(
      title: "Library",
      body: Center(
        child: Text("Library"),
      ),
    );
  }
}

class Layout extends StatelessWidget {
  final String title;
  final Widget body;
  final List<Widget>? actions;

  const Layout({
    Key? key,
    required this.title,
    required this.body,
    this.actions,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(title),
        actions: actions,
      ),
      body: body,
      bottomSheet: Container(
        width: double.infinity,
        padding: const EdgeInsets.all(15),
        color: Theme.of(context).cardColor,
        child: Text("Persistent Bottom Sheet"),
      ),
    );
  }
}