如何将数据从 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: (_) =&gt; StatefulBuilder(builder: (BuildContext context, StateSetter setStateModal)onTap: () setStateModal(() textResult = "1"; ); Navigator.pop(context); , 不,这不是我让你做的。我说只更改 1 行。你不应该改变底部的 setState() !!!它应该引用外部小部件。再试一次。一条线!!! 在我花时间调试您的代码并提供正确答案后,不选择此作为“已接受”答案是不公平的!【参考方案2】:

@Canada2000 的回答没问题。我只是在扩展它。 在showDialog()showModalBottomSheet()+... 中使用StatefulBuilder 是这些小部件与当前上下文树分离。

当我们想在对话框中显示更改时,我们使用StatefulBuilderStatefulBuilder 有自己的statebuilder: (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 中的上一页的主要内容,如果未能解决你的问题,请参考以下文章

如何将数据直接从 Excel 插入 Oracle 数据库

如何将数据从活动发送到 java 类

如何从wavemaker将数据插入数据库

如何将.db文件从资产放到数据/数据/包名/ android [重复]

如何将数据从一个屏幕传递到抽屉?

如何将数据从 UITableViewCell 传输到另一个 UIViewController?