在我的应用程序中,我正在尝试实现类似Badoo的排序/筛选showBottomModalSheet功能。我成功创建了2个单独的页面,可以在它们之间来回导航。然而,我面临的问题是showBottomModalSheet中的第二个页面。返回按钮正常工作,直到我尝试触摸模态框以外的区域,这会将我带回第一个页面。相反,它应该关闭模态框。
用户导航到排序用户模态框,显示showBottomModalSheet的第一页。当用户点击“显示性别”时,它会导航到第二个页面(具有不同的性别)。当按下返回按钮时,它会导航到第一页,直到完全关闭模态框。触摸模态框外部也会关闭模态框
我尝试过的最佳stackoverflow答案:
https://dev59.com/Fbzpa4cB1Zd3GeqPUfHy#63603685
我也尝试使用modal_bottom_sheet包,但没成功。https://pub.dev/packages/modal_bottom_sheet/example 大部分我的代码都在showBottomModalSheet函数中:class Page1 extends StatefulWidget {
const Page1({
Key? key
}) : super(key: key);
@override
_Page1State createState() => _Page1State();
}
class _Page1State extends State<Page1> {
final GlobalKey<NavigatorState> navigatorKey = GlobalKey();
int _currentView = 0;
late List<Widget> pages;
@override
void initState() {
pages = [
page1(),
page2(),
];
super.initState();
}
@override
Widget build(BuildContext context) {
print("LOG build _currentView ${_currentView}");
return pages[_currentView];
}
Widget page1() {
return WillPopScope(
onWillPop: () async {
return true;
},
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(60), topLeft: Radius.circular(60))),
height: 400,
width: double.maxFinite,
child: Center(
child: Column(
children: [
Text("First page"),
ElevatedButton(
onPressed: () {
setState(() {
_currentView = 1;
print("LOG page1 _currentView ${_currentView}");
});
},
child: Text("tap to navigate to 2nd page"),
),
],
)),
));
}
Widget page2() {
return WillPopScope(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(60), topLeft: Radius.circular(60))),
height: 400,
width: double.maxFinite,
child: Center(
child: InkWell(
onTap: () {
setState(() {
_currentView = 0;
print("LOG page2 _currentView ${_currentView}");
});
},
child: Text("tap to navigate to 1st screen"),
),
),
),
onWillPop: () async {
print("LOG currentView jot $_currentView");
if (_currentView == 0) {
return true;
}
setState(() {
_currentView = 0;
});
return false;
});
}
}