Flutter对接Google Apps Script拉取Sheet双列数据实现匹配查询及错误排查

该异常核心原因集中在Google Apps Script的部署配置、返回头设置以及数据解析逻辑错误，按以下步骤排查即可：

• 第一步：修正Apps Script部署配置
  打开对应Google Apps Script项目，点击右上角「部署」→「新建部署」，点击配置图标选择「Web应用」，按如下规则设置：
  • 执行身份为：所有人（甚至匿名用户）
  • 谁可以访问：所有人
    完成部署后复制生成的新Web应用URL，替换现有代码中的请求地址。
• 第二步：添加CORS返回头
  打开Apps Script的doGet函数，在返回数据时添加跨域允许头，示例代码如下：

  function doGet() {
    // 这里是你原有拉取Sheet数据的逻辑
    const sheet = SpreadsheetApp.openById('你的表格ID').getSheetByName('你的工作表名');
    const rawData = sheet.getDataRange().getValues();
    const result = rawData.map(row => ({
      num: row[0], // 对应第一列数字
      content: row[1] // 对应第二列文本
    }));
    // 返回时添加CORS头避免跨域报错
    return ContentService.createTextOutput(JSON.stringify(result))
      .setMimeType(ContentService.MimeType.JSON)
      .setHeader('Access-Control-Allow-Origin', '*');
  }
  

• 第三步：修正Model类与数据解析逻辑
  你当前生成的Model类只能解析单个id字段，不符合Sheet返回两列数组的结构，先调整Model类：

  class SheetItem {
    // 第一列的数字
    final int num;
    // 第二列的文本
    final String content;
  
    SheetItem({required this.num, required this.content});
  
    // 确保字段名和Apps Script返回的JSON字段完全对应
    SheetItem.fromJson(Map<String, dynamic> json) :
      num = json['num'] as int,
      content = json['content'] as String;
  }
  

  调整数据拉取解析逻辑：

  import 'dart:convert';
  import 'package:http/http.dart' as http;
  
  // 全局存储拉取到的所有Sheet数据
  List<SheetItem> allSheetData = [];
  
  Future<void> getData() async {
    try {
      final response = await http.get(Uri.parse("你新部署的Apps Script地址"));
      if (response.statusCode == 200) {
        // Sheet返回的是JSON数组，先转成List
        final List<dynamic> jsonList = jsonDecode(response.body);
        allSheetData = jsonList.map((item) => SheetItem.fromJson(item)).toList();
        print("数据拉取成功，共${allSheetData.length}条记录");
      } else {
        print("请求失败，状态码：${response.statusCode}");
      }
    } catch (e) {
      print("数据拉取异常：$e");
    }
  }
  

完成上述排查后，在页面中添加TextField和查询逻辑即可，示例UI代码如下：

Column(
  children: [
    // 输入数字的TextField
    TextField(
      keyboardType: TextInputType.number,
      decoration: const InputDecoration(
        hintText: "请输入要查询的数字",
        border: OutlineInputBorder(),
      ),
      onSubmitted: (inputValue) {
        // 校验输入是否为有效数字
        final inputNum = int.tryParse(inputValue);
        if (inputNum == null) {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text("请输入有效的数字"))
          );
          return;
        }
        // 遍历匹配对应数据
        String? matchedContent;
        for (var item in allSheetData) {
          if (item.num == inputNum) {
            matchedContent = item.content;
            break;
          }
        }
        // 展示结果
        if (matchedContent != null) {
          showDialog(
            context: context,
            builder: (context) => AlertDialog(
              title: const Text("查询结果"),
              content: Text(matchedContent!),
            ),
          );
        } else {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text("未找到对应数据"))
          );
        }
      },
    ),
  ],
)

注意：需在页面初始化时调用getData拉取全量数据，再进行查询操作。

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