如何在Flutter中设置showModalBottomSheet宽度

1dkrff03  于 2023-03-13  发布在  Flutter
关注(0)|答案(3)|浏览(333)

我有设计(如图所示),我使用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),
                    )
                  ],
                ),
              ),
            );
          },
        );

qhhrdooz

qhhrdooz1#

使用showModalBottomSheet中的约束属性。

showModalBottomSheet(
    context: context,
    constraints: BoxConstraints(
      maxWidth:  600,              
    ),
    builder: ...
  ),
slmsl1lt

slmsl1lt2#

我解决这个问题的方法是把一个容器放在一个容器里面。
父容器是透明的,而子容器是纯色和填充。但是我还没有弄清楚如何模糊背景。
这是密码:

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

pieyvz9o3#

如果你想有自定义的高度和宽度,你可以这样做,这段代码将其定位到屏幕的右侧与50%的宽度和75%的高度..一些答案可以做到这一点,但我也在这里补充说,如果用户点击左侧的工作表,它会弹出,所以它会完美地工作,就像你的设计。

showModalBottomSheet(
            backgroundColor: Colors.transparent,
            isScrollControlled: true,
            context: context,
            builder: (context) => GestureDetector(
              onTapDown: (tapDetails) {
                //closing bottom sheet on tapping on the left
                if (tapDetails.globalPosition.dx <
                    MediaQuery.of(context).size.width * 0.5) {
                  Navigator.pop(context);
                }
              },
              child: Container(
                height: MediaQuery.of(context).size.height * 0.75,
                padding: EdgeInsets.only(
                    left: MediaQuery.of(context).size.width * 0.5),
                color: Colors.transparent,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20.0),
                      topRight: Radius.circular(20.0),
                    ),
                  ),
                ),
              ),
            ),
          );

相关问题