如何将数据从 showmodalbottomsheet 传递到 Flutter 中的上一页
Posted
技术标签:
【中文标题】如何将数据从 showmodalbottomsheet 传递到 Flutter 中的上一页【英文标题】:How to Pass data from showmodalbottomsheet to Previous Page in Flutter 【发布时间】:2021-12-04 10:44:01 【问题描述】:我如何将数据从showmodalbottomsheet
传递到上一页。下面是示例代码,我尝试过的是当我单击它时有一个按钮显示 modalbottomsheet,当我单击完成按钮时它应该将1
值传递到上一页,并且我在onTap
上添加了setState
按,但除非我点击Flutter Hot Reload
,否则它在上一页上仍然没有改变。如何解决这个问题?
class TestPage extends StatefulWidget
const TestPage(Key? key) : super(key: key);
@override
_TestPageState createState() => _TestPageState();
class _TestPageState extends State<TestPage>
String textResult = "";
@override
Widget build(BuildContext context)
return Scaffold(
body: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(textResult),
TextButton(
onPressed: ()
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(24.0),
topLeft: Radius.circular(24.0))),
context: context,
builder: (_) => StatefulBuilder(
builder: (BuildContext context, setState)
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: ()
setState(()
textResult = "1";
);
Navigator.pop(context);
,
child: Text(
'Done',
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold),
),
),
],
),
),
],
),
);
),
);
,
child: Text('Press'))
],
),
),
),
),
);
【问题讨论】:
【参考方案1】:尝试改变这一行:
builder: (BuildContext context, setState)
用这条线
builder: (BuildContext context, StateSetter setStateModal)
解释:
build
中的外部小部件(Scaffold
及其内容)和showModalBottomSheet
内部的小部件具有不同的setState( )
。当您需要更新该小部件的某些部分时,您必须确保调用外部的。这个想法是setState( )
在您的showModalBottomSheet
之外的小部件。为此,您可以为这两个 setState()
指定不同的名称,这样您就知道您在呼叫哪一个:StateSetter setStateModal
【讨论】:
我试过但还是不行builder: (_) => StatefulBuilder(builder: (BuildContext context, StateSetter setStateModal)
onTap: () setStateModal(() textResult = "1"; ); Navigator.pop(context); ,
不,这不是我让你做的。我说只更改 1 行。你不应该改变底部的 setState() !!!它应该引用外部小部件。再试一次。一条线!!!
在我花时间调试您的代码并提供正确答案后,不选择此作为“已接受”答案是不公平的!【参考方案2】:
@Canada2000 的回答没问题。我只是在扩展它。
在showDialog()
或showModalBottomSheet()
+... 中使用StatefulBuilder
是这些小部件与当前上下文树分离。
当我们想在对话框中显示更改时,我们使用StatefulBuilder
。 StatefulBuilder
有自己的state
⇾ builder: (BuildContext context, setState)
并且调用setState
是使用StatefulBuilder
的setstate。
现在假设您要更改两个 UI,为此您只需将 StatefulBuilder
的状态重命名为 @Canada2000 所说的 SBsetState
inside builder。
_TestPageState
使用setState(())
要更新对话框 UI,请使用 StatefulBuilder 的状态,例如 SBsetState(())
如果您不想在对话框中显示任何更改,您可以简单地忽略 StatefulBuilder。
您的小部件
import 'package:flutter/material.dart';
class TestPage extends StatefulWidget
const TestPage(Key? key) : super(key: key);
@override
_TestPageState createState() => _TestPageState();
class _TestPageState extends State<TestPage>
String textResult = "";
@override
Widget build(BuildContext context)
return Scaffold(
body: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("text Result $textResult"),
TextButton(
onPressed: ()
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(24.0),
topLeft: Radius.circular(24.0))),
context: context,
builder: (_) => StatefulBuilder(
builder: (BuildContext context, setStateBTS)
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: ()
setState(()
textResult = "1";
);
Navigator.pop(context);
,
child: Text(
'Done',
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold),
),
),
],
),
),
],
),
);
),
);
,
child: Text('Press'))
],
),
),
),
),
);
【讨论】:
以上是关于如何将数据从 showmodalbottomsheet 传递到 Flutter 中的上一页的主要内容,如果未能解决你的问题,请参考以下文章