Flutter如何正确显示BIG5编码JSON中的字符？

问题描述 #

我希望从由Capesoft NetTalk服务（基于SoftVelocity Clarion Web服务器生成）返回的JSON中正确显示BIG5编码的字符，该怎么做？现有Flutter处理代码如下：

List<dataRecord> parseJson(String responseBody) {
    final parsed =
        convert.jsonDecode(responseBody).cast<Map<String, dynamic>>();
    return parsed.map<dataRecord>((json) => dataRecord.fromJson(json)).toList();
  }

  Future<List<dataRecord>> fetchData(http.Client client) async {
    isLoading = true;
    print(widget.clientID.toString());
    final response = await client.get(
      Uri.parse('some_api'),
      headers: {
        "Content-type": "application/json",
        "Accept": "application/json",
        "Connection": "Keep-Alive",
      },
    );
    return parseJson(response.body);
  }

解决方案 #

1. 引入BIG5解码依赖

Dart标准库未内置BIG5编码解码器，需借助第三方包charset_converter处理字节转字符串的编码转换。在pubspec.yaml中添加依赖：

dependencies:
  charset_converter: ^2.1.1

执行flutter pub get完成依赖安装。

2. 修改请求解码逻辑

Flutter的http包默认会将响应按UTF-8解码，直接使用response.body会导致BIG5字符乱码。需先获取原始字节流，再用BIG5编码解码为Dart字符串后再解析JSON：

import 'package:charset_converter/charset_converter.dart';

List<dataRecord> parseJson(String responseBody) {
  final parsed = convert.jsonDecode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<dataRecord>((json) => dataRecord.fromJson(json)).toList();
}

Future<List<dataRecord>> fetchData(http.Client client) async {
  isLoading = true;
  print(widget.clientID.toString());
  final response = await client.get(
    Uri.parse('some_api'),
    headers: {
      "Content-type": "application/json",
      "Accept": "application/json",
      "Accept-Charset": "big5", // 明确告知服务器返回BIG5编码
      "Connection": "Keep-Alive",
    },
  );
  
  // 将BIG5编码的原始字节转换为Dart支持的Unicode字符串
  String decodedString = await CharsetConverter.decode("BIG5", response.bodyBytes);
  
  return parseJson(decodedString);
}

3. UI层直接显示

经过上述解码后，JSON中的BIG5字符已转换为Dart内部的Unicode字符串，直接在Text组件中使用即可正常显示，无需额外处理。

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