1

所以，我是一个新的 Flutter 开发者，目前正在尝试制作自己的 Flutter 应用程序，而无需任何教程。我对 Modal Bottom Sheet 和 Bottom App Bar 的高度感到困惑。我希望这两个小部件都被同等提升。目前，我的应用行为是这样的。我的应用行为. 底部模态表仅涵盖底部应用栏和其他所有内容。我的代码是这样的。

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 应用程序中看到了一个非常好的动画 FAB、Modal Bottom Sheet 和 Bottom App Bar 组合，Reply 示例。Flutter 库示例. ( https://play.google.com/store/apps/details?id=io.flutter.demo.gallery&hl=en ) 当 Modal Bottom Sheet 出现时，FAB 动画消失，Sheet 和 App Bar 同样升高，工作表也在底部应用栏上方。这是我在我的应用程序中想要的行为，你们有什么解决方案吗？

4

1 回答 1

1

一个解决方案是让 BottomAppBar 在您的小部件树中的其他上升的 Scaffold 中。

简化示例：

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

设备上的结果

于 2021-01-16T17:18:11.303 回答