如何使 Modal Bottom Sheet 与 Flutter 中的底部应用栏同等提升？

如何解决如何使 Modal Bottom Sheet 与 Flutter 中的底部应用栏同等提升？

所以，我是一名新的 Flutter 开发人员，目前正在尝试在没有任何教程的情况下制作我自己的 Flutter 应用程序。我对模态底部表和底部应用栏的高度感到困惑。我希望两个小部件都得到同等提升。目前，我的应用行为是这样的。

。底部模态表仅覆盖底部应用栏和其他所有内容。我的代码是这样的。

home_screen.dart（我的底部模态表、FAB、底部应用栏所在的位置）

// Packages
import 'package:Flutter/material.dart';
import 'package:hive/hive.dart';
import 'package:hive_Flutter/hive_Flutter.dart';
import 'package:moneige/models/transaction.dart';

// UIs
import '../ui/home_screen/app_bar_title.dart';
import '../ui/home_screen/bottom_app_bar.dart';
import '../ui/home_screen/transaction_list_view.dart';

// Widgets
import '../widget/add_button.dart';

// Styles
import '../constants/styles.dart' as Styles;

class HomeScreen extends StatelessWidget {
  final int totalBalance = 100000;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,appBar: AppBar(
        backgroundColor: Colors.white,title: MyAppBarTitle(totalBalance: totalBalance),),body: ValueListenableBuilder(
        valueListenable: Hive.Box('transactions').listenable(),builder: (context,transactionBox,widget) {
          return (transactionBox.length > 0)
              ? TransactionListView(transactionBox: transactionBox)
              : Center(
                  child: Text('You have no transaction yet',style: Styles.textMedium));
        },bottomNavigationBar: MyBottomAppBar(),floatingActionButton: AddButton(() {
        Hive.Box('transactions').add(Transaction(
            date: DateTime.Now(),changes: 123000,notes: 'Crazier than usual'));

        showModalBottomSheet(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),backgroundColor: Colors.white,context: context,elevation: 10,useRootNavigator: true,builder: (BuildContext context) {
              return Container(height: 200);
            });
      }),floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,);
  }
}

bottom_app_bar.dart（MyBottomAppBar 所在的位置）

// Packages
import 'package:Flutter/material.dart';
import 'package:hive/hive.dart';

// Widgets
import '../../widget/settings_button.dart';
import '../../widget/transaction_report_switch.dart';

// Styles
import '../../constants/styles.dart' as Styles;

class MyBottomAppBar extends StatelessWidget {
  const MyBottomAppBar({
    Key key,}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      shape: CircularNotchedRectangle(),color: Styles.colorPrimary,child: Row(
        children: [
          Spacer(),Container(
            child: TransactionReportSwitch(() => Hive.Box('transactions').deleteall(Hive.Box('transactions').keys)),Container(
            child: SettingsButton(),],);
  }
}

add_button.dart（AddButton 所在的位置）

// Packages
import 'package:Flutter/material.dart';

// Styles
import '../constants/styles.dart' as Styles;

class AddButton extends StatelessWidget {
  final Function handler;

  AddButton(this.handler);

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      child: Icon(
        Icons.add_rounded,color: Colors.white,size: 28,backgroundColor: Styles.colorPrimary,focusColor: Colors.white12,hoverColor: Colors.white12,foregroundColor: Colors.white12,splashColor: Colors.white24,onpressed: handler,);
  }
}

我在 Flutter gallery 应用程序 Reply 示例中看到了一个非常好的动画 FAB、Modal Bottom Sheet 和 Bottom App Bar 组合。

。 (https://play.google.com/store/apps/details?id=io.flutter.demo.gallery&hl=en) 当 Modal Bottom Sheet 出现时，FAB 动画消失并且 Sheet 和 App Bar 同样升高，并且 Sheet 在底部 App Bar 上方。这是我在我的应用中想要的行为，你们有什么解决方案吗？

解决方法

一个解决方案是在您的小部件树中的其他上升脚手架中使用 BottomAppBar。

简化示例：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold( // Your Ascendant Scaffold
        body: MyScreen(),bottomNavigationBar: MyBottomAppBar() // Your BottomAppBar here
      ),);
  }
}

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold( // Your descendant Scaffold
      body: Center(
        child: Text('Hello world'),),);
  }
}

完整示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyWidget(),bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),label: 'Item 1',BottomNavigationBarItem(
              icon: Icon(Icons.settings),label: 'Item 2',],);
  }
}


class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Builder(
          builder: (context) => ElevatedButton(
            child: Text('Show modal bottom sheet'),onPressed: () => _displaysBottomSheet(context),);
  }

  void _displaysBottomSheet(BuildContext context) {
    Scaffold.of(context).showBottomSheet(
      (context) => Container(
        height: 200,color: Colors.amber,child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,mainAxisSize: MainAxisSize.min,children: <Widget>[
              const Text('BottomSheet'),ElevatedButton(
                child: const Text('Close BottomSheet'),onPressed: () => Navigator.pop(context),)
            ],);
  }
}

RESULT ON DEVICE