如何在 Flutter 中将数据从 showmodalbottomsheet 传递到上一页

2024-01-03

我如何传递数据showmodalbottomsheet到上一页。下面是示例代码,我尝试过的是,当我单击它时,有一个按钮显示 modalbottomsheet,当我单击“完成”按钮时,它应该通过1值到上一页,我还添加了setState on onTap按,但上一页上的内容仍然没有改变,除非我点击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'))
              ],
            ),
          ),
        ),
      ),
    );
  }
}

@Canada2000的回答是可以的。我只是延长它。
使用StatefulBuilder inside showDialog() or showModalBottomSheet()+...这些小部件与当前上下文树分离。

We use StatefulBuilder当我们想在对话框上显示更改时。StatefulBuilder有它自己的statebuilder: (BuildContext context, setState) 并打电话setState正在使用StatefulBuilder的设置状态。

现在假设您想要更改两个 UI,为此您只需重命名StatefulBuilder的状态类似于SBsetState正如@Canada2000所说,内部构建器。

  • 更新_TestPageState use 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'))
              ],
            ),
          ),
        ),
      ),
    );
  }
}


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Flutter 中将数据从 showmodalbottomsheet 传递到上一页 的相关文章