Flutter如何抽离ModalBottomSheet为组件并传递单选值至首页？

1. 抽离独立的排序底部弹窗组件 #

创建SortBottomSheet组件，通过回调函数将选中值传递回首页。组件接收两个核心参数：当前选中的排序值，以及选中后的回调方法。

class SortBottomSheet extends StatelessWidget {
  final int selectedValue;
  final Function(int) onSortSelected;
  final constants = YourConstants(); // 替换为你实际的常量类

  const SortBottomSheet({
    super.key,
    required this.selectedValue,
    required this.onSortSelected,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        RadioListTile(
          value: 1,
          groupValue: selectedValue,
          title: const Text("Case Earliest to Latest"),
          onChanged: (val) {
            if (val != null) {
              onSortSelected(val);
              Navigator.pop(context);
            }
          },
          activeColor: constants.secondaryBlueColour,
        ),
        RadioListTile(
          value: 2,
          groupValue: selectedValue,
          title: const Text("Case Latest to Earliest"),
          onChanged: (val) {
            if (val != null) {
              onSortSelected(val);
              Navigator.pop(context);
            }
          },
          activeColor: constants.secondaryBlueColour,
        )
      ],
    );
  }
}

2. 在首页调用组件并处理状态更新 #

在HomePage中维护排序选中值的状态，点击排序按钮时弹出弹窗，通过回调函数更新首页状态：

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int selectedRadioTile = 1; // 默认选中第一个排序选项
  final constants = YourConstants(); // 替换为你实际的常量类

  void setSelectedRadioTile(int val) {
    setState(() {
      selectedRadioTile = val;
      // 这里可添加排序后的业务逻辑，比如重新请求数据、刷新列表等
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ... 页面其他代码
      body: Row(
        children: [
          TextButton.icon(
            onPressed: () {
              showModalBottomSheet(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
                context: context,
                builder: (BuildContext context) {
                  return SortBottomSheet(
                    selectedValue: selectedRadioTile,
                    onSortSelected: setSelectedRadioTile,
                  );
                },
              );
            },
            icon: Icon(
              Icons.sort,
              size: 28,
              color: constants.textGrayColour,
            ),
            label: Text(
              "Sort",
              style: TextStyle(
                color: constants.textGrayColour,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          // ... 你的Filter按钮代码
        ],
      ),
    );
  }
}

核心逻辑说明 #

• 组件通过onSortSelected回调将选中的排序值传递给首页，实现组件与首页的解耦，避免直接依赖首页状态。
• 首页通过setState更新selectedRadioTile，触发UI刷新或后续的排序业务逻辑。
• 弹窗关闭时机与回调触发绑定，选中选项后立即完成状态更新并关闭弹窗，流程简洁。

内容的提问来源于stack exchange，提问作者typicalCSStudent