Flutter从Flask后端提取可变数量嵌套元组数据的方法

前提说明 #

后端返回的(('helloworld',), ('hello',))是Python嵌套元组格式，在Flutter中处理分两种场景，优先推荐后端调整为标准JSON格式，其次是前端直接处理字符串。

方案一：后端调整为标准JSON格式（推荐） #

在Flask接口中用jsonify返回数据，Python元组会自动转为JSON数组，避免前端复杂的字符串解析：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/mymessage')
def mymessage():
    data = (('helloworld',), ('hello',))
    return jsonify(data)

此时前端收到的响应数据为[["helloworld"], ["hello"]]，处理逻辑更简洁可靠。

Flutter端处理代码 #

修改原有代码，添加状态变量存储提取后的消息列表，并更新UI展示：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

// 修正类名符合Dart大驼峰命名规范
class MessageView extends StatefulWidget {
  @override
  _MessageViewState createState() => _MessageViewState();
}

class _MessageViewState extends State<MessageView> {
  List<String> _messages = [];

  void _loadMyData() async {
    final dio = Dio();
    try {
      final response = await dio.get('http://127.0.0.1:3000/mymessage');
      // 遍历嵌套数组，提取每个子数组的第一个元素
      if (response.data is List) {
        setState(() {
          _messages = (response.data as List)
              .map((item) => item is List && item.isNotEmpty ? item[0].toString() : '')
              .where((msg) => msg.isNotEmpty)
              .toList();
        });
      }
    } catch (e) {
      print('请求失败：$e');
    }
  }

  @override
  void initState() {
    super.initState();
    _loadMyData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _messages.isEmpty
            ? const Text("加载中...")
            : ListView.builder(
                itemCount: _messages.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_messages[index]),
                  );
                },
              ),
      ),
    );
  }
}

方案二：前端直接处理原始字符串格式（仅后端无法修改时使用） #

如果后端直接返回字符串"(('helloworld',), ('hello',))"，可通过正则表达式提取目标内容：

Flutter端处理代码 #

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

class MessageView extends StatefulWidget {
  @override
  _MessageViewState createState() => _MessageViewState();
}

class _MessageViewState extends State<MessageView> {
  List<String> _messages = [];

  void _loadMyData() async {
    final dio = Dio();
    try {
      final response = await dio.get('http://127.0.0.1:3000/mymessage');
      String rawData = response.data.toString();
      
      // 正则匹配所有单引号包裹的内容
      RegExp regExp = RegExp(r"'([^']+)'");
      Iterable<Match> matches = regExp.allMatches(rawData);
      
      setState(() {
        _messages = matches.map((match) => match.group(1)!).toList();
      });
    } catch (e) {
      print('请求失败：$e');
    }
  }

  @override
  void initState() {
    super.initState();
    _loadMyData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _messages.isEmpty
            ? const Text("加载中...")
            : ListView.builder(
                itemCount: _messages.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_messages[index]),
                  );
                },
              ),
      ),
    );
  }
}

关键提示 #

• 方案一使用标准JSON格式，兼容性和稳定性更强，能避免字符串解析的潜在问题（比如内容包含单引号时正则会失效）。
• 两种方案都通过setState更新UI，自动展示所有提取到的消息内容。
• 代码添加了异常捕获，避免请求失败导致应用崩溃。

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