标签: flutter-showmodalbottomsheet

在下图中，我在单击“底部导航栏”项目时添加了 showModalBottomSheet，但 BottomNavigationBar 被模式表隐藏，所以我想让它即使存在底部表也可见。任何人都可以请任何人帮助我吗？

这是我的底部导航代码：

Widget _bottomNavigationBar() {
  return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      key: scaffoldState,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.branding_watermark_outlined),
          label: 'Brands',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.category),
          label: 'Category',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: 'Profile',
        )
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: AppColors.blue,
      onTap: (newIndex) => {
            if (newIndex == 1)
              {showBrandsBottomSheet(context)}
            else if (newIndex == 2)
              {showCategoryBottomSheet(context)}
            else
              {
                setState(() {
                  _selectedIndex = newIndex;
                })
              }
          });
}

这是我的底部模型表代码：

showBrandsBottomSheet(BuildContext context) {
  return showModalBottomSheet<void>(
    shape: const …

在我的应用程序中，当用户单击 FAB 时，它会触发包含文本字段的 ModalBottomSheet。直到今天（当我更新到 flutter 2.2.0 时），下面的代码工作正常：当用户点击文本字段时，BottomSheet 向上移动，我们可以正常使用键盘。现在，当我们点击文本字段时，键盘会隐藏 BottomSheet。

更新后有变化吗？

这是代码：

floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.blue[800],
          child: Icon(Icons.add),
          onPressed: () {
            showModalBottomSheet<void>(
              isScrollControlled: true,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  topRight: Radius.circular(20.0),
                ),
              ),
              context: context,
              builder: (BuildContext context) {
                return Container(
                  height: 250,
                  child: Center(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(26.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: [
                              Padding(
                                padding: const EdgeInsets.only(top: 8.0),
                                child: Text(
                                  'Ajouter une liste au carnet',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    color: …

我最近在 Flutter 中遇到了一个我无法解释的奇怪行为。考虑为 WEB 平台构建以下代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Hello World',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({this.title = "Home Page"});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: const Center(
        child: Text(
          'Hello, World!',
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () …

我希望底部工作表看起来像Angular Material 中的工作表。
相反，纸张会扩展至最大宽度。问题是我无法配置底部工作表的宽度。目前看起来像这样

我的代码如下所示：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ...,
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          tooltip: 'Add File',
          onPressed: () => showModalBottomSheet(
            context: context,
            builder: (context) => AddFileBottomSheet(),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10),
                topRight: Radius.circular(10),
              ),
            ),
            // backgroundColor: Colors.transparent,
            isScrollControlled: true,
          ),
        ),
      ),
    );
  }
}

class AddFileBottomSheet extends StatelessWidget {
  @override
  Widget …

在下面的示例中，我在按下“凸起”按钮时打开了一个模态底部工作表在打开的工作表中，我有另一个图标可以打开另一个工作表，但我想在打开第二个底部后关闭第一个工作表床单。我怎样才能实现这个目标？

         import 'package:flutter/material.dart';

        class SecondScreen extends StatefulWidget {
         @override
        _SecondScreenState createState() => _SecondScreenState();
        }

        class _SecondScreenState extends State<SecondScreen> {
           @override
            Widget build(BuildContext context) {
              return Center(
                child: Container(
                 child:RaisedButton(child: Text('Click'), onPressed: () => _openSheet()),
                     ),
                  );
              }

           _openSheet() {
                        showModalBottomSheet(
                          context: context,
                          builder: (BuildContext context) 
                       {
                                return Column(
                                 children: <Widget>[
                                   Container(
                                     height: MediaQuery.of(context).size.height / 2,
                                     width: MediaQuery.of(context).size.width,
                                      child: IconButton(
                                       icon: Icon(Icons.info),
                                        iconSize: 50.0,
                                         onPressed: () => _openSecondSheet(),
                                          ),
                                         ),
                                        ],
                                       );
                                    });
                                  }

                             _openSecondSheet() {
                                showModalBottomSheet(
                               context: context,
                               builder: (BuildContext …

正如标题所示，我有一个 String 参数，当我加载 Home Stateful Widget 时，如果参数不为空，我想打开这个底部工作表。

据我了解，我无法调用showModalBottomSheet()Home小部件的构建函数，因为它在构建Home小部件时无法开始构建底部工作表，那么，有没有办法在构建Home小部件后立即调用它？

我正在使用 showModalBottomSheet 并在开始时给出 90% 的高度。底页中有两个选项卡（重复和一次性），重复选项卡有很多内容，并且显示完美，高度为 90%。但是当我在一次性选项卡上打开选项卡时，我想将底页的大小减小到 40%，因为它没有更多内容，而且看起来不太好。但我无法在按下一次性选项卡按钮时动态更改底页的高度。

谁能帮助我如何在颤振中实现此功能？

我使用 flutter 函数 showmodalbottomsheet 来显示带有自定义滚动视图的页面。

但是当滚动视图的滚动过度滚动时我遇到问题，我想滚动底部表而不是过度滚动 CustomScrollView。

我如何选择我想要使用的卷轴？

例如我想做Facebook评论页面：

我在 Flutter 应用程序中遇到了问题。即使 Scaffold 将resizeToAvoidBottomInset设置为false，键盘也会向上推模态底部表单。我希望模态底部工作表保持在其初始位置。我将向您展示我用于显示模态底部工作表的代码，并附上一个视频来向您展示该错误。

Scaffold(
    resizeToAvoidBottomInset: false,
    key: _scaffoldKey,
    body: ...
)

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  builder: (context) => Container(
      height: MediaQuery.of(context).size.height * 0.8,
      decoration: new BoxDecoration(
        color: Colors.white,
        borderRadius: new BorderRadius.only(
          topLeft: const Radius.circular(25.0),
          topRight: const Radius.circular(25.0),
        ),
      ),
      child: SearchPlace((place, alreadyExists) {
        Navigator.pop(context);
        didSelectPlace(place, alreadyExists);
      })),
);

希望您能帮帮我，谢谢！

我读过这篇参考资料

https://api.flutter.dev/flutter/material/showModalBottomSheet.html

它说“可以传入transitionAnimationController参数来自定义模式底部表单的外观和行为。transitionAnimationController控制底部表单的进入和退出动画（如果提供）。”

但是，我找不到任何关于transitionAnimationController的参考，

所以我的问题是，如何使用transitionAnimationController调整ModalBottomSheet动画（我想调整的入口和出口速度）？

谢谢。