如何在Column组件内的Text和Checkbox中展示两个API返回值

核心实现逻辑 #

在状态类中统一存储两个接口的返回值，处理异步加载的兜底状态，渲染时按对应关系绑定数据即可，单条数据/列表数据场景逻辑通用，以下是无额外依赖的原生实现：

• 基础场景直接用StatefulWidget即可，不需要引入第三方状态管理库
• 两个接口可以并发请求减少加载等待时间
• Checkbox点击时优先更新本地UI，再同步提交状态到后端，避免交互卡顿

完整代码示例 #

1. 定义状态变量 #

class _YourPageState extends State<YourPage> {
  // 第一个接口返回的标题列表（单条场景直接定义String? title即可）
  List<String> apiTitleList = [];
  // 第二个接口返回的布尔状态列表，和标题列表下标一一对应
  List<bool> apiCheckboxStatus = [];
  // 接口加载状态标记
  bool isPageLoading = true;

  @override
  void initState() {
    super.initState();
    // 页面初始化时拉取接口数据
    loadApiData();
  }

2. 实现接口请求逻辑 #

Future<void> loadApiData() async {
    try {
      // 并发发起两个接口请求，替换成你实际的接口调用方法
      final titleResponse = await firstApiRequest();
      final checkboxResponse = await secondApiRequest();
      
      setState(() {
        // 按接口实际返回结构赋值，务必保证两个列表长度一致、下标对应
        apiTitleList = List<String>.from(titleResponse.data);
        apiCheckboxStatus = List<bool>.from(checkboxResponse.data);
        isPageLoading = false;
      });
    } catch (err) {
      setState(() {
        isPageLoading = false;
      });
      // 此处可添加接口请求失败的提示逻辑
    }
  }

3. 渲染Column+ListTile结构 #

@override
  Widget build(BuildContext context) {
    // 加载中展示loading
    if (isPageLoading) {
      return const Center(child: CircularProgressIndicator());
    }
    // 数据异常兜底
    if (apiTitleList.isEmpty || apiTitleList.length != apiCheckboxStatus.length) {
      return const Center(child: Text("数据加载异常"));
    }

    return Column(
      children: List.generate(apiTitleList.length, (index) {
        return ListTile(
          // 绑定第一个接口返回的标题
          leading: Text(apiTitleList[index]),
          trailing: Checkbox(
            // 绑定第二个接口返回的布尔状态
            value: apiCheckboxStatus[index],
            onChanged: (newValue) async {
              if (newValue == null) return;
              // 先更新本地UI，保证交互即时响应
              setState(() {
                apiCheckboxStatus[index] = newValue;
              });
              // 提交最新选中状态到后端，替换成你实际的更新接口
              final updateSuccess = await updateCheckboxApi(index: index, status: newValue);
              // 如果接口提交失败，回滚本地状态
              if (!updateSuccess) {
                setState(() {
                  apiCheckboxStatus[index] = !newValue;
                });
              }
            },
          ),
        );
      }),
    );
  }
}

注意事项 #

• 如果是单条数据场景，把列表类型的状态变量改成单个可空值即可，不需要List.generate逻辑，直接返回单个ListTile
• 渲染前必须校验两个数据源的长度一致性，避免数组越界、标题和勾选状态错配
• Checkbox状态更新建议做失败回滚，保证前端展示状态和后端存储状态一致

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