我有设计(如图所示),我使用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),
)
],
),
),
);
},
);
3条答案
按热度按时间qhhrdooz1#
使用showModalBottomSheet中的约束属性。
slmsl1lt2#
我解决这个问题的方法是把一个容器放在一个容器里面。
父容器是透明的,而子容器是纯色和填充。但是我还没有弄清楚如何模糊背景。
这是密码:
pieyvz9o3#
如果你想有自定义的高度和宽度,你可以这样做,这段代码将其定位到屏幕的右侧与50%的宽度和75%的高度..一些答案可以做到这一点,但我也在这里补充说,如果用户点击左侧的工作表,它会弹出,所以它会完美地工作,就像你的设计。