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