Flutter:ModalBottomSheet内部的可拖动滚动布局不会被忽略

Question

我正在尝试创建一个可滚动的ModalBottomSheet，当我触摸模态外部时，它就会消失。

这是ModalBottomSheet:的代码

void _modalBottomSheet(BuildContext context) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
return DraggableScrollableSheet(
initialChildSize: 0.5,
builder: (BuildContext context, ScrollController controller) {
return Container(
padding: EdgeInsets.only(top: 30),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft:Radius.circular(40),
topRight: Radius.circular(40)
)
),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: TextField(
focusNode: _focusNode,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10),
hintText: 'Search people...'
),
onChanged: (String change) => print(1)
)
),
Expanded(
child: ListView.builder(
controller: controller,
padding: EdgeInsets.all(10),
itemCount:  filteredUsers.length,
itemBuilder: (BuildContext context, int index) {
return FlatButton(
onPressed: () {
collabsList.add(filteredUsers[index].name);
widget.changeCallback(collabsList);
},
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
filteredUsers[index].name,
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 16,
color: Colors.black
)
),
SizedBox(height: 5),
Text(
filteredUsers[index].email,
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 14,
color: Colors.grey
)
)
]
)
)
)
);
}
)
)
]
)
);
}
);
}
);
}

Answer 1

您可以通过将属性isDismissible: true添加到showModalBottomSheet来使模式表被取消。

还要注意在DraggableScrollableSheet中设置expand: false

Answer 2

使isDismissible:true，可以解除

showModalBottomSheet<void>(
isDismissible:true ,