Flutter实现子组件回调传值至父组件并切换侧边抽屉

你只需要在父组件的回调里先保存传递过来的数值，再打开抽屉，同时根据保存的数值动态切换抽屉内容就行，具体修改如下：

1. 修复父组件（HomeScreen）的回调逻辑 #

在ListView.builder里的CustomTableRow的onTap回调中，先调用你已经定义好的updateValue方法保存数值，再打开抽屉：

ListView.builder(
  itemCount: 50,
  shrinkWrap: true,
  itemBuilder: (context, index) {
    return CustomTableRow(
      onTap: (int buttonPressed){
        // 先保存传递过来的int值
        updateValue(buttonPressed);
        // 再打开抽屉
        Scaffold.of(context).openEndDrawer();
      }
    );
  },
)

2. 根据保存的数值动态渲染抽屉内容 #

修改endDrawer部分，根据savedValue的值来显示不同的自定义屏幕组件（这里假设你有对应不同数值的屏幕，比如ExperienceScreen1、ExperienceScreen2等）：

endDrawer: Drawer(
  child: savedValue == 1 
      ? ExperienceScreen1() // 对应点击第一个InkWell的内容
      : savedValue == 2
          ? ExperienceScreen2() // 对应点击第二个InkWell的内容
          : DefaultExperienceScreen(), // 默认显示的内容
),

3. 修复子组件（CustomTableRow）的构造函数错误 #

你当前的CustomTableRow构造函数参数写法有误，把required widget.onTap改成required this.onTap：

class CustomTableRow extends StatefulWidget {
  // 修正构造函数
  const CustomTableRow({super.key, required this.onTap});

  final Function(int) onTap;

  @override
  State<CustomTableRow> createState() => _CustomTableRowState();
}

这样修改后，点击子组件的InkWell时，传递的int值会被保存到HomeScreen的savedValue变量中，抽屉也会根据这个值显示对应的内容。

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