Flutter中如何解析XML图片列表为List并实现多图展示

核心需求 #

将XML结构中<photoURLs>节点下的所有<photoURL>子节点文本提取为List<String>，赋值给Pet类的photoUrls属性，实现多图展示。

步骤1：确保依赖xml包 #

在pubspec.yaml中添加xml包依赖：

dependencies:
  xml: ^6.4.2 # 可使用最新稳定版本

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

步骤2：优化Pet类定义 #

将photoUrls类型从List<dynamic>改为List<String>，类型更严谨，同时新增XML解析构造函数：

import 'package:xml/xml.dart';

class Pet {
  int id = 0;
  String name = '';
  String category = '';
  List<String> photoUrls = [];
  List<dynamic> tags = [];
  String status = '';

  Pet(this.id, this.name, this.category, this.photoUrls, this.tags, this.status);

  Pet.fromJson(Map json)
      : id = json['id'],
        name = json['name'],
        category = json['category']['name'],
        photoUrls = List<String>.from(json['photoUrls']),
        tags = json['tags'],
        status = json['status'];

  // 新增XML解析构造函数
  Pet.fromXml(XmlElement xmlElement)
      : id = int.parse(xmlElement.findElements('id').single.text),
        name = xmlElement.findElements('name').single.text,
        category = xmlElement.findElements('category').single.findElements('name').single.text,
        photoUrls = xmlElement.findElements('photoURLs').single.findElements('photoURL')
            .map((urlNode) => urlNode.text.trim())
            .toList(),
        tags = xmlElement.findElements('tags').single.findElements('tag')
            .map((tagNode) => {'id': int.parse(tagNode.findElements('id').single.text), 'name': tagNode.findElements('name').single.text})
            .toList(),
        status = xmlElement.findElements('status').single.text;

  Map toJson() {
    return {
      'id': id,
      'name': name,
      'category': category,
      'photoUrls': photoUrls,
      'tags': tags,
      'status': status
    };
  }
}

步骤3：XML解析与Pet实例化 #

假设你通过API获取到XML字符串，解析流程如下：

// 模拟API返回的完整XML响应
String xmlResponse = '''
<pet>
  <id>1</id>
  <name>Doggy</name>
  <category>
    <name>Dog</name>
  </category>
  <photoURLs>
    <photoURL>https://example.com/photo1.jpg</photoURL>
    <photoURL>https://example.com/photo2.jpg</photoURL>
    <photoURL>https://example.com/photo3.jpg</photoURL>
  </photoURLs>
  <tags>
    <tag>
      <id>1</id>
      <name>friendly</name>
    </tag>
  </tags>
  <status>available</status>
</pet>
''';

// 解析XML并创建Pet实例
void parsePetXml() {
  final document = XmlDocument.parse(xmlResponse);
  final petElement = document.findElements('pet').single;
  final Pet pet = Pet.fromXml(petElement);
  
  // 验证多图片URL列表
  print(pet.photoUrls); // 输出: [https://example.com/photo1.jpg, https://example.com/photo2.jpg, https://example.com/photo3.jpg]
}

关键解析逻辑说明 #

• 通过xmlElement.findElements('photoURLs').single定位到图片列表根节点
• 使用findElements('photoURL')获取所有图片URL子节点
• 通过map((urlNode) => urlNode.text.trim())提取每个节点的文本并去除多余空格
• 最后用toList()转换为List<String>赋值给photoUrls

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