如何在颤动中设置 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 在颤动中设置参考选择数组的位置条件 [关闭]