在点击时,我执行以下功能应使底页以通常的方式显示(从底向上滚动):
showModalBottomSheet(
context: context,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
isScrollControlled: true,
isDismissible: true,
backgroundColor: Colors.white,
builder: (context) => ChooseTimeDialog(),
);
应该出现的底页应该是可滚动的。它的代码如下:
class ChooseTimeDialog extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DraggableScrollableSheet(
initialChildSize: 0.4,
minChildSize: 0.2,
maxChildSize: 0.6,
builder: (context, scrollController) {
return SingleChildScrollView(
controller: scrollController,
child: Container(
color: Colors.blue,
height: 300,
width: 200,
),
);
},
);
}
}
这是点击时显示的结果:
为什么覆盖整个屏幕?
当isScrollControlled设置为“ True”时,允许bottomModal占据视图的高度。将其设置为“ False”会更改此视图。
我使用您的代码创建了此dartpad,但删除了build方法的小部件类https://dartpad.dev/5850ec2b79564bb28f361eeed2b383ec
如果您想将模式表的代码与调用函数分开,则应该使用变量,而不是新的类。
这是上面dartpad文件中包含的代码:
class MyFloatingActionButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return FloatingActionButton(
onPressed: () {
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
isScrollControlled: false,
isDismissible: true,
backgroundColor: Colors.white,
context: context,
builder: (context) => DraggableScrollableSheet(
initialChildSize: 0.4,
minChildSize: 0.2,
maxChildSize: 0.6,
builder: (context, scrollController) {
return SingleChildScrollView(
controller: scrollController,
child: Container(
color: Colors.blue,
height: 300,
width: 200,
),
);
},
),
);
},
);
}
}