我如何仅在模态底部工作表（而不是父页面）中执行 Navigator.push
Sim*_*eon 9 flutter flutter-layout flutter-navigation
在我的应用程序中，我试图创建一个评论部分。在本节中，我希望用户能够以类似于 YouTube 应用程序的方式回复其他用户的评论。我已经成功创建了一个模式底部表单，显示了顶级评论，并且在几个流构建器的帮助下，它运行得很好。然而，我面临的问题是二级评论（回复人们的评论）。我想让用户点击评论并进入一个页面（仍在模式底部表单中），在那里他可以看到对评论的所有回复，也可以自己发表评论，如果他按回去，他就会去回到他所在的位置，可以继续滚动浏览顶级评论。
类似于 YouTube 应用程序的外观。我的想法是在底部工作表中使用 Navigator.push，在模式底部工作表中当前现有页面的顶部覆盖一个新页面，在这个新页面中，特定评论的第二级评论（回复）是被显示。但是，当我调用 Navigator.push 时，整个页面都会发生变化。整个父页面都会转移到新页面，而不仅仅是底部工作表中的内容。所以，这就是我的问题。我对想法持开放态度。
我的评论底部表后面的代码：
showModalBottomSheet(
context: context,
builder: (context) {
return
Container(
child: StatefulBuilder(
builder: (BuildContext context, setTheModalState) {
setModalState = setTheModalState;
return Container(
child: Column(
children: <Widget>[
Expanded(
child: StreamBuilder(listview))])}))}
这就是我到目前为止所设计的。现在棘手的一点是按下回复按钮（消息图标）时在模式表中创建一个新页面
这就是 YouTube 评论系统的样子。
评论区代码：
showModalBottomSheet(
context: context,
builder: (context) {
return
Container(
child: StatefulBuilder(
builder: (BuildContext context, setTheModalState) {
setModalState = setTheModalState;
return Container(
child: Column(
children: <Widget>[
Expanded(
child: StreamBuilder(
stream: Firestore.instance
.collection("Replies")
.document(dream.documentID)
.collection(dream.documentID)
.orderBy('time', descending: true)
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: SpinKitDoubleBounce(
color: Colors.blue,
),
);
} else {
dynamic replies = snapshot.data.documents;
return ListView.builder(
itemCount: replies.length,
reverse: true,
itemBuilder: (context, index) {
if (replies[index]["text"] != "" &&
replies[index]["images"] == null) {
return _buildStringCommment(
replies[index], true);
} else {
if (replies[index]["images"].length == 1) {
return _buildCommentFromOneImage(
replies[index], true);
} else {
if (replies[index]["images"].length == 2) {
return _buildCommentFromTwoImages(
replies[index], true);
} else {
if (replies[index]["images"].length ==
3) {
return _buildCommentFromThreeImages(
replies[index], true);
} else {
if (replies[index]["images"].length ==
4) {
return _buildCommentFromFourImages(
replies[index], true);
} else {
if (replies[index]["images"].length ==
5) {
return _buildCommmentFromFiveImages(
replies[index], true);
} else {
return _buildMessageFromMoreThanFiveImages(
replies[index], true);
}
}
}
}
}
}
},
);
}
},
),
),
theTypeReplyThingie(dream, context, true)
],
),
);
},
),
);
},
);
“类型回复事物”是具有文本输入表单和发送按钮的小部件。
Aza*_*pat 10
您好，我认为您需要在底页内导航，因为它发生在普通页面中，您可以继续的一种方法是使用下面的代码，只要测试一下这个代码，一旦我希望它能工作，谢谢。每当需要打开工作表时调用 openbottomsheet
void opensheet() async {
showModalBottomSheet(
context: (context),
enableDrag: true,
isDismissible: true,
builder: (context) {
return Page1();
});
}
}
class Page1 extends StatefulWidget {
@override
_Page1State createState() => _Page1State();
}
class _Page1State extends State<Page1> {
int currentview = 0;
List<Widget> pages;
@override
void initState() {
pages = [
page1(),
page2(),
];
super.initState();
}
@override
Widget build(BuildContext context) {
return pages[currentview];
}
Widget page1() {
return 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 = 1;
});
},
child: RaisedButton(
child: Text("click to navigate"),
),
),
),
);
}
Widget page2() {
return 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;
});
},
child: Text("click to move back"),
),
),
);
}
}
控制父页面上的后退按钮，其中底部工作表用 willpopscope 包围脚手架
willpopscope(
onwillpopscope:(){
//check if bottomsheet is open or not this may be hard to listen the state of bottomsheet let me try it
if(bottomsheetisopen){
//set the bottomsheet currentindex to 0 for initial page
return Future.value(false);
}else{
return Future.value(true);
}
}
child:Scaffold()
)
尝试使用bottomsheet和modalbottomsheet其中之一提供一个监听器来监听sheet的状态，天气它是打开还是关闭的