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

Question

所以我在我的 Flutter 应用程序中实现了一个“设置”视图。这个想法是所有设置都将出现在 aListView中，当用户单击 a 时ListTile，ashowModalBottomSheet将弹出用户可以操作设置的位置。我遇到的唯一问题是我无法将其迁移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在单独的类中实现并让它返回代表用户选择的设置的变量？

标签： flutterdart

Answer 1

你可以试试下面的代码，

首先，创建一个类 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）。

谢谢！