Flutter中ListView内InkWell加载时触发状态设置的实现方法

你要实现的是页面从其他路由跳转过来时，自动选中用户之前选择的性别，核心是在页面初始化阶段处理状态，不要在ListView的itemBuilder里执行初始化逻辑（itemBuilder会随列表滚动反复调用，容易触发无限重建或状态混乱）。

具体实现步骤： #

1. 确保能获取到之前保存的性别数据：可以通过路由参数传递、本地存储（比如SharedPreferences）或者全局状态管理来拿到用户之前选择的_gender值。
2. 在页面初始化时设置选中状态：在StatefulWidget的initState方法里，结合addPostFrameCallback确保页面渲染完成后再更新状态（避免context相关问题）。

修改后的代码示例： #

首先在你的State类中添加初始化逻辑：

@override
void initState() {
  super.initState();
  // 这里替换成你获取保存的_gender的方式
  // 比如从路由参数拿：
  // final savedGender = ModalRoute.of(context)?.settings.arguments as String?;
  // if (savedGender != null) _gender = savedGender;

  // 等待页面渲染完成后执行状态更新
  WidgetsBinding.instance.addPostFrameCallback((_) {
    setState(() {
      // 找到对应性别的索引
      final selectedIndex = genders.indexWhere((gender) => gender.name == _gender);
      if (selectedIndex != -1) {
        // 先取消所有选中状态
        genders.forEach((gender) => gender.isSelected = false);
        // 设置目标性别为选中
        genders[selectedIndex].isSelected = true;
        // 同步更新背景色
        switch(_gender) {
          case 'Male':
            changeBackgroundColor(const Color.fromRGBO(196,213,239,1.000));
            break;
          case 'Female':
            changeBackgroundColor(const Color.fromRGBO(239, 196, 234, 1));
            break;
          default:
            changeBackgroundColor(const Color.fromRGBO(161, 203, 180, 1));
        }
      }
    });
  });
}

然后你的ListView.builder部分保持原有的onTap逻辑即可，不需要额外添加初始化代码：

child: ListView.builder(
  shrinkWrap: true,
  scrollDirection: Axis.horizontal,
  itemCount: genders.length,
  itemBuilder: (context, index) {
    return InkWell(
      splashColor: Colors.pinkAccent,
      onTap: () {
        setState(() {
          genders.forEach((gender) => gender.isSelected = false);
          genders[index].isSelected = true;
          _gender = genders[index].name;
          if(_gender == 'Male') {
            changeBackgroundColor(const Color.fromRGBO(196,213,239,1.000));
          } else if(_gender == 'Female') {
            changeBackgroundColor(const Color.fromRGBO(239, 196, 234, 1));
          } else {
            changeBackgroundColor(const Color.fromRGBO(161, 203, 180, 1));
          }
        });
      },
      child: sign_up_page(genders[index]),
    );
  }
)

关键注意点： #

• 不要在itemBuilder中执行状态更新操作，否则会因列表滚动反复触发，导致状态异常和性能损耗。
• 如果使用本地存储持久化数据，记得在用户点击选择性别时同步保存_gender值，下次进入页面时直接读取即可。

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