我正在使用一个
showModalBottomSheet
小部件,我想改变它的大小,以便占据屏幕约75%的空间(默认情况下似乎占据50%)。我尝试遵循文档,但找不到大小属性。有人能建议一种方法来改变这个小部件的大小吗?
选择其中一个最适合您的架构
showModalBottomSheet(
context: context,
builder: (BuildContext builder) {
return Container(
height: MediaQuery.of(context).copyWith().size.height * 0.75,
child: CupertinoDatePicker(
initialDateTime: appointmentDate,
onDateTimeChanged: (DateTime newDate) {
if (this.mounted) setState(() => appointmentDate = newDate);
},
use24hFormat: true,
mode: CupertinoDatePickerMode.date,
isScrollControlled: true,
),
);
},
);
isScrollControlled
设置为 true
时才能正常工作。 - kbpontius使用Wrap widget
包裹您的布局子节点,这样就不需要设置高度了。
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext builder) {
return Container(
child: Wrap(
children: <Widget>[
],
),
);
},
);
您需要将参数isScrollControlled设置为true。
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
/* your code */
}
);
isScrollControlled
设置为 true
才能使上述提到的高度计算(为 0.75
)正确工作。 - kbpontius这是完整的代码,根据以上答案:
final Map<String, String>? dictValue = await showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) {
return SizedBox(
height: MediaQuery.of(context).copyWith().size.height * (3 / 4),
child: MyCustomWidget(
showPhoneCode: true,
onSelect: (value) {},
),
);
},
);
```
占据屏幕的75%,
showModalBottomSheet(
context: context,
builder: (BuildContext builder) {
return Container(
height: MediaQuery.of(context).copyWith().size.height* (3/4),
child: CupertinoDatePicker(
initialDateTime: appointmentDate,
onDateTimeChanged: (DateTime newDate) {
if (this.mounted) setState(() => appointmentDate = newDate);
},
use24hFormat: true,
mode: CupertinoDatePickerMode.date,
),
);
},
);
isScrollControlled
设置为 true
时才有效。 - kbpontius