如何在颤动中设置 showModalBottomSheet 宽度

Posted

技术标签:

【中文标题】如何在颤动中设置 showModalBottomSheet 宽度【英文标题】:how to set showModalBottomSheet width in flutter 【发布时间】:2021-04-26 20:42:36 【问题描述】:

我有设计(如图所示)并且我正在使用 showModalBottomSheet 但是当我设置宽度时,它不会改变并保持为屏幕宽度,所以我有几个问题:

1-如何设置showModalBottomSheet的宽度 2-这种底部菜单是否有 showModalBottomSheet 的替代方法 3-如何模糊照片中显示的背景

showModalBottomSheet<void>(
          context: context,
          builder: (BuildContext context) 
            return Container(
              height: SizeConfig.screenHeight * 0.6,
              width: 30,
              color: Colors.red,
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    const Text('Modal BottomSheet'),
                    ElevatedButton(
                      child: const Text('Close BottomSheet'),
                      onPressed: () => Navigator.pop(context),
                    )
                  ],
                ),
              ),
            );
          ,
        );

【问题讨论】:

【参考方案1】:

我通过将容器放入容器中解决了这个问题。 父容器具有透明颜色,而子容器具有纯色和填充。 但是我仍然没有弄清楚如何模糊背景。 这是代码:

showModalBottomSheet(
            context: context,
            backgroundColor: Colors.transparent,
            builder: (BuildContext bc) 
              return Container(
                height: SizeConfig.screenHeight * 0.6,
               
                child: Padding(
                  padding: EdgeInsets.only(left: SizeConfig.screenWidth * 0.4),
                  child: Container(
                  
                    child: SingleChildScrollView(
                      child:
                        
                          Padding(
                        padding: EdgeInsets.only(
                            top: SizeConfig.blockSizeVertical * 1.5),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            
                          ],
                        ),
                      ),
                     
                    ),
                  ),
                ),
              );
            );

【讨论】:

以上是关于如何在颤动中设置 showModalBottomSheet 宽度的主要内容,如果未能解决你的问题,请参考以下文章

如何在颤动中设置滚动条颜色?

如何使用 Cloud Firestore 在颤动中设置参考选择数组的位置条件 [关闭]

在谷歌地图颤动中设置标记

在颤动中设置列宽

在flutter中设置childAspectRatio的正确方法

如何在颤动中为标签栏下划线添加渐变?