Flutter中如何将API返回的股票列表按名称字母排序？

以下是我调用API的代码：

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import '../models/apis/hisselist.dart';

class Hisseler extends StatefulWidget {
  const Hisseler({Key? key}) : super(key: key);

  @override
  State<Hisseler> createState() => _HisselerState();
}

class _HisselerState extends State<Hisseler> {
  final scaffoldKey = GlobalKey<ScaffoldState>();
  final url = Uri.parse('https://api.collectapi.com/economy/hisseSenedi');
  var counter;
  Hisselist? hisseResult;

  Future callHisse() async {
    try{
      Map<String, String> requestHeaders = {
        'Content-Type': 'application/json',
        'Authorization': 'apikey xxxx'
      };
      final response = await http.get(url,headers:requestHeaders);

      if(response.statusCode == 200){
        var result = hisselistFromJson(response.body);

        if(mounted);
        setState(() {
          counter = result.result.length;
          hisseResult = result;
        });
        return result;
      } else {
        print(response.statusCode);
      }
    } catch(e) {
      print(e.toString());
    }
  }
  
  @override
  void initState() {
    super.initState();
    callHisse();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: false,
        automaticallyImplyLeading: false,
        title: Text('Hisseler'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: counter != null ?
          ListView.separated(
              itemCount: counter,
              separatorBuilder: (context, index) => SizedBox(height: 2),
              itemBuilder: (context, index){
                return Card(
                  child: ListTile(
                    title: Text(hisseResult?.result[index].lastpricestr.toString()??""),
                    subtitle: Text(hisseResult?.result[index].text??""),
                  ),
                );
              }) : Center(child: CircularProgressIndicator()),
        ),
      ),
    );
  }
}

我的模型文件如下：

/*
// To parse this JSON data, do
//
//     final hisselist = hisselistFromJson(jsonString);

import 'dart:convert';

Hisselist hisselistFromJson(String str) => Hisselist.fromJson(json.decode(str));

String hisselistToJson(Hisselist data) => json.encode(data.toJson());

class Hisselist {
  Hisselist({
    required this.success,
    required this.result,
  });

  bool success;
  List<ResultClass> result;

  factory Hisselist.fromJson(Map<String, dynamic> json) => Hisselist(
    success: json["success"], result: json["result"].map<ResultClass>((x) => ResultClass.fromJson(x)).toList(),
  );

  Map<String, dynamic> toJson() => {
    "success": success,
    "result": result.map((x) => x.toJson()),
  };
}

class ResultClass {
  ResultClass({
    required this.rate,
    required this.lastprice,
    required this.lastpricestr,
    required this.hacim,
    required this.hacimstr,
    required this.text,
    required this.code,
  });

  double rate;
  double lastprice;
  String lastpricestr;
  double hacim;
  String hacimstr;
  String text;
  String code;

  factory ResultClass.fromJson(Map<String, dynamic> json) => ResultClass(
    rate: double.tryParse(json["rate"].toString()) ?? 0.0,
    lastprice: double.tryParse(json["lastprice"].toString()) ?? 0.0,
    lastpricestr: json["lastpricestr"],
    hacim: double.tryParse(json["hacim"].toString()) ?? 0.0,
    hacimstr: json["hacimstr"],
    text: json["text"],
    code: json["code"],
  );

  Map<String, dynamic> toJson() => {
    "rate": rate,
    "lastprice": lastprice,
    "lastpricestr": lastpricestr,
    "hacim": hacim,
    "hacimstr": hacimstr,
    "text": text,
    "code": code,
  };
}


 */

// To parse this JSON data, do
//
//     final hisselist = hisselistFromJson(jsonString);

import 'dart:convert';

Hisselist hisselistFromJson(String str) => Hisselist.fromJson(json.decode(str));

String hisselistToJson(Hisselist data) => json.encode(data.toJson());

class Hisselist {
  Hisselist({
    required this.success,
    required this.result,
  });

  bool success;
  List<Result> result;

  factory Hisselist.fromJson(Map<String, dynamic> json) => Hisselist(
    success: json["success"],
    result: List<Result>.from(json["result"].map((x) => Result.fromJson(x))),
  );

  Map<String, dynamic> toJson() => {
    "success": success,
    "result": List<dynamic>.from(result.map((x) => x.toJson())),
  };
}

class Result {
  Result({
    this.rate,
    this.lastprice,
    this.lastpricestr,
    this.hacim,
    this.hacimstr,
    this.min,
    this.minstr,
    this.max,
    this.maxstr,
    this.time,
    this.text,
    this.code,
  });

  double? rate;
  double? lastprice;
  String? lastpricestr;
  String? hacim;
  String? hacimstr;
  dynamic min;
  String? minstr;
  dynamic max;
  String? maxstr;
  Time? time;
  String? text;
  String? code;

  factory Result.fromJson(Map<String, dynamic> json) => Result(
    rate: json["rate"].toDouble(),
    lastprice: json["lastprice"].toDouble(),
    lastpricestr: json["lastpricestr"],
    hacim: json["hacim"],
    hacimstr: json["hacimstr"],
    min: json["min"],
    minstr: json["minstr"],
    max: json["max"],
    maxstr: json["maxstr"],
    time: timeValues.map[json["time"]],
    text: json["text"],
    code: json["code"],
  );

  Map<String, dynamic> toJson() => {
    "rate": rate,
    "lastprice": lastprice,
    "lastpricestr": lastpricestr,
    "hacim": hacim,
    "hacimstr": hacimstr,
    "min": min,
    "minstr": minstr,
    "max": max,
    "maxstr": maxstr,
    "time": timeValues.reverse[time],
    "text": text,
    "code": code,
  };
}

enum Time { THE_1809, THE_1808, THE_1805, THE_1810, THE_1759, THE_1755 }

final timeValues = EnumValues({
  "17:55": Time.THE_1755,
  "17:59": Time.THE_1759,
  "18:05": Time.THE_1805,
  "18:08": Time.THE_1808,
  "18:09": Time.THE_1809,
  "18:10": Time.THE_1810
});

class EnumValues<T> {
  Map<String, T> map;
  Map<T, String>? reverseMap;

  EnumValues(this.map);

  Map<T, String> get reverse {
    if (reverseMap == null) {
      reverseMap = map.map((k, v) => new MapEntry(v, k));
    }
    return reverseMap!;
  }
}

解决方案 #

修改callHisse方法，在获取到API数据后对股票列表按名称（text字段）进行排序：

Future callHisse() async {
  try{
    Map<String, String> requestHeaders = {
      'Content-Type': 'application/json',
      'Authorization': 'apikey xxxx'
    };
    final response = await http.get(url,headers:requestHeaders);

    if(response.statusCode == 200){
      var result = hisselistFromJson(response.body);
      
      // 按股票名称升序排序，不区分大小写
      result.result.sort((a, b) {
        final textA = a.text?.toLowerCase() ?? '';
        final textB = b.text?.toLowerCase() ?? '';
        return textA.compareTo(textB);
      });

      if(mounted){
        setState(() {
          counter = result.result.length;
          hisseResult = result;
        });
      }
      return result;
    } else {
      print(response.statusCode);
    }
  } catch(e) {
    print(e.toString());
  }
}

说明

1. 排序逻辑：使用List.sort()方法，通过比较两个股票的text字段实现排序，转为小写是为了避免大小写影响排序结果。
2. 空值处理：如果某条数据的text字段为null，默认转为空字符串，防止排序时出现异常。
3. 降序切换：如果需要降序排列，只需将textA.compareTo(textB)改为textB.compareTo(textA)。
4. 修复潜在问题：修正了原代码中if(mounted);的语法错误，确保setState只在组件挂载时执行。

内容的提问来源于stack exchange，提问作者Mıktad Tahir Durak