将变量从当前屏幕返回到上一屏幕

奇拉格·阿罗拉(Chirag Arora)

因此,我正在Flutter应用程序中实现“设置”视图。想法是所有设置都将显示在中ListView,并且当用户单击时ListTileshowModalBottomSheet将弹出a用户可以在其中操作设置的位置。我唯一的问题是我无法将迁移showModalBottomSheet到单独的类,因为我无法使新函数(在类外部)返回操纵的设置变量。这导致了一个凌乱的代码,所有代码都在一个类中。

class Page extends StatefulWidget {
  Page({Key key}) : super(key: key);

  @override
  _Page createState() => _Page();
}

class _Page extends State<Page> {
  var value;

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          title: Text("Age"),
          trailing: Text(value),
          onTap: () {
            setState(() {
              value = _valueSelector(); // This doesn't work, but to give an idea what I want
            });  
          },
        ),
      ],
    );
  }
}

int _valueSelector(context) { // Doesn't return
  var age = 0;

  showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return StatefulBuilder(
          builder: (BuildContext context, StateSetter setState) {
        return Wrap(
          children: [
            Column(
              children: <Widget>[
                Slider(
                  value: age.toDouble(),
                  min: 0,
                  max: 18,
                  divisions: 18,
                  onChanged: (value) {
                    setState(() {
                      age = value.toInt();
                    });
                  },
                ),
              ],
            ),
          ],
        );
      });
    },
  ).whenComplete(() {
    return age; // Not sure if return is supposed to be here
  });
}

如何showModalBottomSheet在一个单独的类中实现并使其返回代表用户选择的设置的变量?

维格涅什

您可以尝试以下代码,

首先,创建一个类custom_bottom_sheet.dart并添加以下代码。您可以在项目中的任何地方使用它。并且还使用此库modal_bottom_sheet:^ 0.2.0 + 1来获取showMaterialModalBottomSheet

customBottomSheet(BuildContext context, {@required Widget widget}) async {
  return await showMaterialModalBottomSheet(
    context: context,
    backgroundColor: AppColors.transparent_100,
    barrierColor: AppColors.black_75,
    isDismissible: false,
    enableDrag: true,
    builder: (_, ScrollController scrollController) {
      return widget;
    },
  );
}

示例代码示例:

创建另一个名为bottom_sheet_example.dart的类,并添加以下代码。

 class BottomSheetExample {
  static Future getSheet(BuildContext _context,
      {ValueChanged<bool> onChanged}) async {
    await customBottomSheet(
      _context,
      widget: SafeArea(
          child: Container(
        padding: EdgeInsets.only(left: 40.0, right: 40.0),
        height: 170.0,
        width: double.infinity,
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(27.0),
                topRight: Radius.circular(27.0))),
        child: Container(
          padding: EdgeInsets.only(top: 32),
          child: Column(
            children: [
              Text("Were you at Queen Victoria Building?"),
              SizedBox(height: 48),
              Row(
                children: [
                  Expanded(
                    child: RaisedButton(
                      child: Text("No"),
                      onPressed: () {
                        Navigator.of(_context).pop();
                        onChanged(false);
                      },
                    ),
                  ),
                  SizedBox(width: 18),
                  Expanded(
                    child: RaisedButton(
                      child: Text("Yes"),
                      onPressed: () {
                        Navigator.of(_context).pop();

                        onChanged(true);
                      },
                    ),
                  ),
                ],
              ),
              SizedBox(height: 24),
            ],
          ),
        ),
      )),
    );
  }
}

单击按钮以显示底部工作表

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: yourBodyWidget(),
      bottomNavigationBar: Container(
        height: 40,
        width: double.infinity,
        child: FlatButton(
            onPressed: () {
              /// call BottomSheetExample class
              BottomSheetExample.getSheet(
                context,
                onChanged: (bool result) async {
                  ///
                  /// add your code
                },
              );
            },
            child: Text("show bottom sheet")),
      ),
    );
  }

onChanged回调中,您可以返回值(obj / String / num / bool / list)。

谢谢!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

注销后,如果按浏览器后退按钮,则返回上一屏幕

来自分类Dev

如何保存当前状态以用于将来的修改并返回到上一次提交并从那里继续工作?

来自分类Dev

R将不想要的输出返回到屏幕或丢弃一些返回值

来自分类Dev

在共享或登录之后以及返回到当前屏幕之前,FacebookSDK是否始终显示LaunchScreen吗?

来自分类Dev

如何将标签设置为UICollectionView-SWIFT-同一屏幕上的多个CollectionView

来自分类Dev

终端在当前屏幕和上一屏幕之间闪烁

来自分类Dev

返回上一屏幕时本机反应页面数据未更新

来自分类Dev

如果您通过滑动取消了返回上一屏幕的过程,则导航栏将保持不变而不会消失

来自分类Dev

单击按钮在同一屏幕上显示TextField值

来自分类Dev

登录后使用参数将Azure AD身份验证返回到上一页

来自分类Dev

在swiftui中收到API调用的响应后如何返回上一屏幕?

来自分类Dev

Flutter:同一屏幕上的英雄动画

来自分类Dev

React Navigation 5嵌套屏幕无法返回到主屏幕

来自分类Dev

React Navigation 3:Android中的“后退”按钮不会返回上一屏幕

来自分类Dev

在同一屏幕上打开Winforms

来自分类Dev

XML响应返回到屏幕,而不是返回到变量

来自分类Dev

当我切换到上一屏幕时,为什么在iCarousel视图中显示的图像会显示在上一屏幕中?

来自分类Dev

在Android中如何在不关闭当前屏幕的情况下转到第一屏?

来自分类Dev

在共享或登录后以及返回到当前屏幕之前,FacebookSDK是否总是显示LaunchScreen吗?

来自分类Dev

在同一屏幕中循环创建脚本

来自分类Dev

Android Show在同一屏幕上捕获视频预览

来自分类Dev

Install4j:如何在同一屏幕上返回到以前的FromComponent(尤其是在控制台中)

来自分类Dev

在同一屏幕上注入了不同的服务

来自分类Dev

从imageview返回到主屏幕android studio

来自分类Dev

如何在Android中按后退按钮返回上一屏幕

来自分类Dev

上一屏幕的 Stackview 调用槽

来自分类Dev

如何在ios中创建一个返回上一屏幕的后退按钮

来自分类Dev

在同一屏幕中弹出多个顶部面板

来自分类Dev

SwiftUI 中的异步下一屏幕演示

Related 相关文章

  1. 1

    注销后,如果按浏览器后退按钮,则返回上一屏幕

  2. 2

    如何保存当前状态以用于将来的修改并返回到上一次提交并从那里继续工作?

  3. 3

    R将不想要的输出返回到屏幕或丢弃一些返回值

  4. 4

    在共享或登录之后以及返回到当前屏幕之前,FacebookSDK是否始终显示LaunchScreen吗?

  5. 5

    如何将标签设置为UICollectionView-SWIFT-同一屏幕上的多个CollectionView

  6. 6

    终端在当前屏幕和上一屏幕之间闪烁

  7. 7

    返回上一屏幕时本机反应页面数据未更新

  8. 8

    如果您通过滑动取消了返回上一屏幕的过程,则导航栏将保持不变而不会消失

  9. 9

    单击按钮在同一屏幕上显示TextField值

  10. 10

    登录后使用参数将Azure AD身份验证返回到上一页

  11. 11

    在swiftui中收到API调用的响应后如何返回上一屏幕?

  12. 12

    Flutter:同一屏幕上的英雄动画

  13. 13

    React Navigation 5嵌套屏幕无法返回到主屏幕

  14. 14

    React Navigation 3:Android中的“后退”按钮不会返回上一屏幕

  15. 15

    在同一屏幕上打开Winforms

  16. 16

    XML响应返回到屏幕,而不是返回到变量

  17. 17

    当我切换到上一屏幕时,为什么在iCarousel视图中显示的图像会显示在上一屏幕中?

  18. 18

    在Android中如何在不关闭当前屏幕的情况下转到第一屏?

  19. 19

    在共享或登录后以及返回到当前屏幕之前,FacebookSDK是否总是显示LaunchScreen吗?

  20. 20

    在同一屏幕中循环创建脚本

  21. 21

    Android Show在同一屏幕上捕获视频预览

  22. 22

    Install4j:如何在同一屏幕上返回到以前的FromComponent(尤其是在控制台中)

  23. 23

    在同一屏幕上注入了不同的服务

  24. 24

    从imageview返回到主屏幕android studio

  25. 25

    如何在Android中按后退按钮返回上一屏幕

  26. 26

    上一屏幕的 Stackview 调用槽

  27. 27

    如何在ios中创建一个返回上一屏幕的后退按钮

  28. 28

    在同一屏幕中弹出多个顶部面板

  29. 29

    SwiftUI 中的异步下一屏幕演示

热门标签

归档