Flutter | 有一个 modalbottomsheet 并希望将其提取为一个小部件

Question

我正在通过 function 实现排序，它通过模态底页显示排序选项，我可以在我的“主页”小部件中执行此操作。 想检查我是否可以提取这些代码并将其作为小部件进行分拆，以便更好地组织。 我无法做到，因为我担心无线电值的返回值。

感谢您提供的任何帮助，谢谢！！

这是我的代码：

child: TextButton.icon( // Button to press sort 
    onPressed: (() {
      showModalBottomSheet( // show modal 
          shape: RoundedRectangleBorder(
              borderRadius:
                  BorderRadius.circular(10.0)),
          context: context,
          builder: (BuildContext build) {
            return Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[ // radio values 
                RadioListTile(
                  value: 1,
                  groupValue: selectedRadioTile,
                  title: Text(
                      "Case Earliest to Latest"),
                  onChanged: (val) {
                    print(
                        "Radio Tile pressed $val");
                    setSelectedRadioTile(val!);
                    print(selectedRadioTile);
                    Navigator.pop(context);
                  },
                  activeColor:
                      constants.secondaryBlueColour,
                ),
                RadioListTile(
                  value: 2,
                  groupValue: selectedRadioTile,
                  title: Text(
                      "Case Latest to Earliest "),
                  onChanged: (val) {
                    print(
                        "Radio Tile pressed $val");
                    setSelectedRadioTile(val!);
                    print(selectedRadioTile);
                    Navigator.pop(context);
                  },
                  activeColor:
                      constants.secondaryBlueColour,
                )
              ],
            );
          });
    }),
    icon: Icon(
      Icons.sort,
      size: 28,
      color: constants.textGrayColour,
    ),
    label: Text("Sort",
        style: TextStyle(
            color: constants.textGrayColour,
            fontWeight: FontWeight.bold)))),***
    Container(
      margin: const EdgeInsets.only(top: 5),
      width: MediaQuery.of(context).size.width * 0.5,
      decoration: BoxDecoration(
          border: Border(
        left: BorderSide(
            width: 2.0,
            color:
                constants.categoryButtonBackgroundColour),
        bottom: BorderSide(
            width: 2.0,
            color:
                constants.categoryButtonBackgroundColour),
      )),
      child: TextButton.icon(
          onPressed: () {},
          icon: Icon(Icons.filter_alt,
              size: 28, color: constants.textGrayColour),
          label: Text("Filter",
              style: TextStyle(
                  color: constants.textGrayColour,
                  fontWeight: FontWeight.bold))),
    ),
  ],
),

我实现了一个 SortWidget() 但想知道如何将当前无线电值返回到我的主页并根据无线电值在主页中设置 state

Answer 1

showModalBottomSheet是未来的方法，您可以为此使用异步方法。 和Navigator.pop(context, value); 会给你结果。 你也可以使用回调方法，你的情况似乎不需要。

onPressed:()async {
  final value = await showModalBottomSheet(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
    context: context,
    builder: (BuildContext build) {
      return MyBottomSheetWidget(selectedRadioTile: selectedRadioTile);
    },
  );
   print("$value");
}

class MyBottomSheetWidget extends StatelessWidget {
  // make it statefulWidget if you want to update dialog ui
  const MyBottomSheetWidget({
    Key? key,
    required this.selectedRadioTile,
  }) : super(key: key);

  final selectedRadioTile;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        // radio values
        RadioListTile(
          value: 1,
          groupValue: selectedRadioTile,
          title: Text("Case Earliest to Latest"),
          onChanged: (val) {
            print("Radio Tile pressed $val");

            Navigator.pop(context, val);
          },
        ),
        RadioListTile(
          value: 2,
          groupValue: selectedRadioTile,
          title: Text("Case Latest to Earliest "),
          onChanged: (val) {
            print("Radio Tile pressed $val");
            // setSelectedRadioTile(val!);
            print(selectedRadioTile);
            Navigator.pop(context, val);
          },
        )
      ],
    );
  }
}

Answer 2

showModalBottomSheet实际上是一个 function，如果没有其他小部件就无法转换为小部件。 您可以做的是，创建一个 function，其中包含此showModalBottomSheet的代码，并在单击按钮时调用该 function。

但是如果你想创建一个单独的小部件，那么你可以从以return Column开头的showModalBottomSheet的内部代码创建小部件。

您需要创建一个小部件，它可以采用两个属性，即名为selected的 int 变量和名为setSelected的Function 。 然后您可以从showModalBottomSheet内部调用该小部件并从您的页面传递两个道具。 此选择将设置为 selectedRadioTile & setSelected 将设置为 setSelectedRadioTile。

示例代码

class BottomFilter extends StatelessWidget {
  const BottomFilter(
      {Key? key,
      required this.selected,
      required this.setSelected})
      : super(key: key);

  final int selected;
  final Function setSelected;
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        // radio values
        RadioListTile(
          value: 1,
          groupValue: selected,
          title: Text("Case Earliest to Latest"),
          onChanged: (val) {
            print("Radio Tile pressed $val");
            setSelected(val!);
            print(selected);
            Navigator.pop(context);
          },
          activeColor: Colors.amber,
        ),
        RadioListTile(
          value: 2,
          groupValue: selected,
          title: Text("Case Latest to Earliest "),
          onChanged: (val) {
            print("Radio Tile pressed $val");
            setSelected(val!);
            print(selected);
            Navigator.pop(context);
          },
          activeColor: Colors.amber,
        )
      ],
    );
  }
}

像这样称呼它

builder: (BuildContext build) {
          return BottomFilter(selected: selectedRadioTile, setSelected:  setSelectedRadioTile);
        })

用于测试此代码的 Dartpad 链接https://dartpad.dev/?id=e75b493dae1287757c5e1d77a0dc73f1