Flutter：如何从Future<List<SliderDetails>>拆分出两个字符串列表？

第一步：修正JSON字段匹配错误 #

原代码中SliderDetails构造时误用了urlLink和name键，但JSON数据对应的是image和title，先修正字段匹配：

class FutureInformation extends StatelessWidget {
  const FutureInformation({Key? key}) : super(key: key);

  Future<List<SliderDetails>> getSliderDetails() async {
    try {
      var response = await http.get(Uri.parse("/path/to/jsonFile.json"));
      if (response.statusCode == 200) {
        var jsonData = json.decode(utf8.decode(response.bodyBytes));
        List<SliderDetails> listedFestivals = [];
        for (var map in jsonData) {
          // 替换为JSON实际字段键
          SliderDetails allFestivals = SliderDetails(
            map['image'] ?? "",
            map['title'] ?? "",
          );
          listedFestivals.add(allFestivals);
        }
        return listedFestivals;
      }
    } catch (e) {
      print(e);
    }
    throw Exception('未获取到数据');
  }
}

// 补充SliderDetails类定义（若未定义）
class SliderDetails {
  final String imageUrl;
  final String title;

  SliderDetails(this.imageUrl, this.title);
}

第二步：异步获取并拆分数据为两个列表 #

通过await获取完整的异步结果，再用map方法提取图片链接和标题到独立列表：

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

  @override
  State<YourWidget> createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget> {
  final List<String> imgList = [];
  final List<String> titlesList = [];

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

  _loadAndSplitData() async {
    final datasource = const FutureInformation();
    // 用await获取异步结果，避免返回Future实例
    List<SliderDetails> sliderData = await datasource.getSliderDetails();
    
    // 拆分数据到两个列表
    setState(() {
      imgList.addAll(sliderData.map((item) => item.imageUrl).toList());
      titlesList.addAll(sliderData.map((item) => item.title).toList());
    });
  }

  @override
  Widget build(BuildContext context) {
    // 可直接使用imgList和titlesList构建UI
    return Container();
  }
}

最终拆分效果 #

拆分后的数据与预期完全一致：

// imgList内容
[
  "https://i.gyazo.com/5d808c6e55a8b2151974bf53b35e21b6.png",
  "https://i.gyazo.com/7f33e4e78a54d1c4795aec5e0d57fab1.png",
  "https://i.gyazo.com/5e399b0ac1ffca12165f51af8bc3e81a.png",
  "https://i.gyazo.com/8c74b2ec4da1ba477afbc67111573c4d.png",
]

// titlesList内容
[
  "Yellow Car",
  "Black Car",
  "Blue Car",
  "Vintage Car",
]

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