Flutter ListView.builder内置Dropdown服务端返回Pending时如何更新指定记录

核心调整点 #

• 控制组件可编辑状态：Flutter中DropdownButton的onChanged属性传入null时组件会自动进入禁用状态，只需判断当前条目状态是否为Pending，仅符合条件时才赋值选中处理逻辑即可实现需求。
• 修复值联动问题：原代码使用全局dropdownValue存储选中值，会导致列表中所有下拉框值同步变动，直接绑定列表对应下标的ApprovalModel状态值即可。
• 新增数据同步逻辑：选中新值后新增调用业务层更新方法，将修改同步到数据库。

调整后完整代码 #

List<String> approvalList = ['Pending', 'Approve', 'Discard'];

Container(
  height: MediaQuery.of(context).size.height*0.3,
  width: MediaQuery.of(context).size.width,
  child:StreamBuilder<List<ApprovalModel>>(
    stream: bloc.approvalsStream,
    initialData: [],
    builder: (context, snapshot) {
      if(snapshot.connectionState==ConnectionState.waiting){
        return Center(
          child: Lottie.asset(
          'assets/lottieloading.json',
          width: 70,
          height: 70,
          fit: BoxFit.fill,
        ),
        );
      }
      return ListView.builder(
          itemCount: snapshot.data!.length,
          itemBuilder: (context,i){
            // 提前计算当前条目的状态文本
            String currentStatus = snapshot.data![i].status==0?'Pending':
                snapshot.data![i].status==1?'Approve':
                'Discard';
            return ListTile(
              title: Text(snapshot.data![i].approverName),
              trailing: StatefulBuilder(
                  builder: (BuildContext context, StateSetter setState) {
                    return DropdownButton<String>(
                      value: currentStatus,
                      disabledHint: Text(currentStatus), // 禁用状态显示当前值
                      items: approvalList.map((String val) {
                        return DropdownMenuItem<String>(
                          value: val,
                          child: Text(val),
                        );
                      }).toList(),
                      // 仅当前状态为Pending时允许操作
                      onChanged: currentStatus == 'Pending' ? (val) {
                        if(val == null) return;
                        // 把选中的字符串转成对应status数值
                        int newStatus = val == 'Pending' ? 0 : val == 'Approve' ? 1 : 2;
                        setState(() {
                          // 更新当前条目的状态值
                          snapshot.data![i].status = newStatus;
                        });
                        // 这里添加你自己的更新数据库/调用接口/提交Bloc事件的逻辑
                        // 示例：bloc.updateApprovalStatus(
                        //   recordId: snapshot.data![i].id, 
                        //   status: newStatus
                        // );
                      } : null,
                    );
                  }
              ),
            );
          });
    }
  ),
)

补充说明 #

如果需要更明显的禁用样式，可以给禁用状态下的文本颜色改成灰色，只需在Text(val)外层加判断，非Pending状态时给Text加style: TextStyle(color: Colors.grey)即可。

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