Flutter中如何从List<Object>映射并获取数据？

问题原因 #

你定义的imgListObject是List<Object>类型，而Object没有[]运算符，所以无法直接用data['image']或data['text']访问字典中的值。下面是三种可行的解决方案：

方案1：修改列表类型为List<Map<String, dynamic>> #

这是最简单直接的方法，把列表的类型从Object改成明确的Map类型，这样就能直接使用[]访问键值：

final List<Map<String, dynamic>> imgListObject = [
  {"image": AppGlobalVariables.howItWorksSliderImage1, "text": 'Text 1'},
  {"image": AppGlobalVariables.howItWorksSliderImage2, "text": 'Text 2'},
  {"image": AppGlobalVariables.howItWorksSliderImage3, "text": 'Text 3'},
];

修改后，原来的映射代码不需要任何改动就能正常运行。

方案2：映射时强制类型转换 #

如果不想修改列表的原始类型，可以在映射过程中把data强制转换成Map<String, dynamic>：

final List<Widget> imageSliders = imgListObject
    .map(
      (data) => Column(
        children: [
          Image.asset((data as Map<String, dynamic>)['image']),
          Text((data as Map<String, dynamic>)['text']),
        ],
      ),
    )
    .toList();

注意：这种方式要确保列表中所有元素都是Map类型，否则会抛出类型转换异常。

方案3：创建实体类（推荐的规范写法） #

对于长期维护的项目，建议创建实体类来封装轮播项数据，这样能保证类型安全，代码可读性也更高：

首先定义实体类：

class SliderItem {
  final String image;
  final String text;

  SliderItem({required this.image, required this.text});
}

然后初始化列表：

final List<SliderItem> imgListObject = [
  SliderItem(image: AppGlobalVariables.howItWorksSliderImage1, text: 'Text 1'),
  SliderItem(image: AppGlobalVariables.howItWorksSliderImage2, text: 'Text 2'),
  SliderItem(image: AppGlobalVariables.howItWorksSliderImage3, text: 'Text 3'),
];

最后映射生成轮播组件：

final List<Widget> imageSliders = imgListObject
    .map(
      (item) => Column(
        children: [
          Image.asset(item.image),
          Text(item.text),
        ],
      ),
    )
    .toList();

修改后的完整代码（方案1示例） #

class HowItWorksScreen extends StatelessWidget {
  const HowItWorksScreen({super.key});

  @override
  Widget build(BuildContext context) {
    ContentSession contentSession = Provider.of<ContentSession>(context, listen: false);

    final CarouselController _carouselController = CarouselController();

    final List<Map<String, dynamic>> imgListObject = [
      {"image": AppGlobalVariables.howItWorksSliderImage1, "text": 'Text 1'},
      {"image": AppGlobalVariables.howItWorksSliderImage2, "text": 'Text 2'},
      {"image": AppGlobalVariables.howItWorksSliderImage3, "text": 'Text 3'},
    ];

    final List<Widget> imageSliders = imgListObject
        .map(
          (data) => Column(
            children: [
              Image.asset(data['image']),
              Text(data['text']),
            ],
          ),
        )
        .toList();

    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(50),
        child: AppbarMain(),
      ),
      body: Column(
        children: [
          CarouselSlider(
            carouselController: _carouselController,
            options: CarouselOptions(
              viewportFraction: 0.8,
              enableInfiniteScroll: true,
              enlargeCenterPage: true,
              autoPlay: true,
              height: 400,
            ),
            items: imageSliders,
          ),
          const SizedBox(
            height: 40,
          ),
          ElevatedButton(
            onPressed: () async => Navigator.pushNamed(context, landingScreenRoute!),
            child: Text(contentSession.stringsHomeScreen.signin),
          ),
        ],
      ),
    );
  }
}

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