Flutter中如何将接口响应数据转换为指定样式展示？

我需要在Flutter中将接口响应数据转换为指定样式展示。当前点击搜索按钮后，结果页仅以纯文本形式显示接口返回内容：

• 首页：带有搜索输入框和搜索按钮的页面
• 当前结果页：仅居中展示接口返回的纯文本内容
• 目标结果页原型：采用卡片式结构化布局，分区域展示不同类型的信息

当前resultpage.dart代码如下：

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

class output extends StatelessWidget {
  final String apiresult;

  output(this.apiresult);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Result Screen'),
      ),
      body: Center(
        child: Text(apiresult),
      ),
    );
  }
}

实现目标样式的代码示例 #

假设接口返回的是JSON格式数据，我们先将字符串解析为可操作的模型对象，再用Flutter组件构建结构化布局，以下是完整实现代码：

1. 定义数据模型类 #

// 请根据实际接口返回的JSON结构调整字段
class ApiResponseModel {
  final String title;
  final String description;
  final String detailInfo;

  ApiResponseModel({
    required this.title,
    required this.description,
    required this.detailInfo,
  });

  // 从JSON字符串解析为模型实例
  factory ApiResponseModel.fromJson(String jsonStr) {
    final jsonMap = Map<String, dynamic>.from(jsonDecode(jsonStr));
    return ApiResponseModel(
      title: jsonMap['title'] ?? '',
      description: jsonMap['description'] ?? '',
      detailInfo: jsonMap['detail'] ?? '',
    );
  }
}

2. 修改结果页组件 #

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

class output extends StatelessWidget {
  final String apiresult;

  output(this.apiresult);

  @override
  Widget build(BuildContext context) {
    // 解析接口返回字符串为模型对象
    final apiModel = ApiResponseModel.fromJson(apiresult);

    return Scaffold(
      appBar: const AppBar(
        title: Text('Result Screen'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
        child: Card(
          elevation: 4,
          borderRadius: BorderRadius.circular(12),
          child: Padding(
            padding: const EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                // 标题区域
                Text(
                  apiModel.title,
                  style: const TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.bold,
                    color: Colors.blueAccent,
                  ),
                ),
                const SizedBox(height: 16),
                // 描述区域
                Text(
                  '描述：${apiModel.description}',
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.grey[700],
                  ),
                ),
                const SizedBox(height: 12),
                // 详情区域
                Text(
                  '详情：${apiModel.detailInfo}',
                  style: const TextStyle(
                    fontSize: 14,
                    color: Colors.black87,
                  ),
                ),
                // 可根据原型添加更多字段展示，比如列表、图标、分隔线等
              ],
            ),
          ),
        ),
      ),
    );
  }
}

注意事项 #

• 请根据目标原型截图和实际接口返回的数据结构，调整ApiResponseModel的字段以及布局组件（比如添加列表项、图标、分隔线等）
• 如果接口返回的不是JSON格式，可根据实际数据格式修改解析逻辑
• 布局中的样式（如字体大小、颜色、卡片圆角等）可根据原型需求调整参数

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