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

huangapple
go评论145阅读模式
英文:

How to map and get data from List<Object> in Flutter

问题

以下是您要的翻译部分：

我正在使用CarouselSlider包，我使用的项目来自硬编码的数据。我想从List&lt;Object&gt;中映射数据。这是我的对象：

  1. final List&lt;Object&gt; imgListObject = [
  2.   {&quot;image&quot;: &quot;/imageAsset1&quot;, &quot;text&quot;: &#39;Text 1&#39;},
  3.   {&quot;image&quot;: &quot;/imageAsset2&quot;, &quot;text&quot;: &#39;Text 2&#39;},
  4.   {&quot;image&quot;: &quot;/imageAsset3&quot;, &quot;text&quot;: &#39;Text 3&#39;},
  5. ];

这是我打算获取数据的方式：

  1. final List&lt;Widget&gt; imageSliders = imgListObject
  2.     .map(
  3.       (data) =&gt; Column(
  4.         children: [
  5.           Image.asset(data[&#39;image&#39;]),
  6.           Text(data[&#39;text&#39;]),
  7.         ],
  8.       ),
  9.     )
  10.     .toList();

我从data[&#39;image&#39;]和data[&#39;text&#39;]遇到了这个错误：

  1. 运算符&#39;[]&#39;未定义为&#39;Object&#39;类型。

我的完整代码：

  1. class HowItWorksScreen extends StatelessWidget {
  2.   const HowItWorksScreen({super.key});
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     ContentSession contentSession = Provider.of&lt;ContentSession&gt;(context, listen: false);
  8.     final CarouselController _carouselController = CarouselController();
  10.     final List&lt;Object&gt; imgListObject = [
  11.       {&quot;image&quot;: AppGlobalVariables.howItWorksSliderImage1, &quot;text&quot;: &#39;Text 1&#39;},
  12.       {&quot;image&quot;: AppGlobalVariables.howItWorksSliderImage2, &quot;text&quot;: &#39;Text 2&#39;},
  13.       {&quot;image&quot;: AppGlobalVariables.howItWorksSliderImage3, &quot;text&quot;: &#39;Text 3&#39;},
  14.     ];
  16.     final List&lt;Widget&gt; imageSliders = imgListObject
  17.         .map(
  18.           (data) =&gt; Column(
  19.             children: [
  20.               Image.asset(data[&#39;image&#39;]),
  21.               Text(data[&#39;text&#39;]),
  22.             ],
  23.           ),
  24.         )
  25.         .toList();
  27.     return Scaffold(
  28.       appBar: PreferredSize(
  29.         preferredSize: Size.fromHeight(50),
  30.         child: AppbarMain(),
  31.       ),
  32.       body: Column(
  33.         children: [
  34.           CarouselSlider(
  35.             carouselController: _carouselController,
  36.             options: CarouselOptions(
  37.               viewportFraction: 0.8,
  38.               enableInfiniteScroll: true,
  39.               enlargeCenterPage: true,
  40.               autoPlay: true,
  41.               height: 400,
  42.             ),
  43.             items: imageSliders,
  44.           ),
  45.           SizedBox(
  46.             height: 40,
  47.           ),
  48.           ElevatedButton(
  49.             onPressed: () async =&gt; Navigator.pushNamed(context, landingScreenRoute!),
  50.             child: Text(contentSession.stringsHomeScreen.signin),
  51.           ),
  52.         ],
  53.       ),
  54.     );
  55.   }
  56. }

希望这有助于您获得所需的输出。

英文:

I'm using CarouselSlider package and the items I used is from a hardcoded data. I'd like to get data from mapping it from a List&lt;Object&gt;. Here is my object:

  1.     final List&lt;Object&gt; imgListObject = [
  2.       {&quot;image&quot;: &quot;/imageAsset1&quot;, &quot;text&quot;: &#39;Text 1&#39;},
  3.       {&quot;image&quot;: &quot;/imageAsset2&quot;, &quot;text&quot;: &#39;Text 2&#39;},
  4.       {&quot;image&quot;: &quot;/imageAsset3&quot;, &quot;text&quot;: &#39;Text 3&#39;},
  5.     ];

And this is how I intend to get the data:

  1.     final List&lt;Widget&gt; imageSliders = imgListObject
  2.         .map(
  3.           (data) =&gt; Column(
  4.             children: [
  5.               Image.asset(data[&#39;image&#39;]),
  6.               Text(data[&#39;text&#39;]),
  7.             ],
  8.           ),
  9.         )
  10.         .toList();

I have this error from data[&#39;image&#39;] and data[&#39;text&#39;]:

  1. The operator &#39;[]&#39; isn&#39;t defined for the type &#39;Object&#39;.

My full code:

  1. class HowItWorksScreen extends StatelessWidget {
  2.   const HowItWorksScreen({super.key});
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     ContentSession contentSession = Provider.of&lt;ContentSession&gt;(context, listen: false);
  8.     final CarouselController _carouselController = CarouselController();
  10.     final List&lt;Object&gt; imgListObject = [
  11.       {&quot;image&quot;: AppGlobalVariables.howItWorksSliderImage1, &quot;text&quot;: &#39;Text 1&#39;},
  12.       {&quot;image&quot;: AppGlobalVariables.howItWorksSliderImage2, &quot;text&quot;: &#39;Text 2&#39;},
  13.       {&quot;image&quot;: AppGlobalVariables.howItWorksSliderImage3, &quot;text&quot;: &#39;Text 3&#39;},
  14.     ];
  16.     final List&lt;Widget&gt; imageSliders = imgListObject
  17.         .map(
  18.           (data) =&gt; Column(
  19.             children: [
  20.               Image.asset(data[&#39;image&#39;]),
  21.               Text(data[&#39;text&#39;]),
  22.             ],
  23.           ),
  24.         )
  25.         .toList();
  27.     return Scaffold(
  28.       appBar: PreferredSize(
  29.         preferredSize: Size.fromHeight(50),
  30.         child: AppbarMain(),
  31.       ),
  32.       body: Column(
  33.         children: [
  34.           CarouselSlider(
  35.             carouselController: _carouselController,
  36.             options: CarouselOptions(
  37.               viewportFraction: 0.8,
  38.               enableInfiniteScroll: true,
  39.               enlargeCenterPage: true,
  40.               autoPlay: true,
  41.               height: 400,
  42.             ),
  43.             items: imageSliders,
  44.           ),
  45.           SizedBox(
  46.             height: 40,
  47.           ),
  48.           ElevatedButton(
  49.             onPressed: () async =&gt; Navigator.pushNamed(context, landingScreenRoute!),
  50.             child: Text(contentSession.stringsHomeScreen.signin),
  51.           ),
  52.         ],
  53.       ),
  54.     );
  55.   }
  56. }

I'm hoping to have this output:
如何在Flutter中映射并从List<Object>中获取数据

答案1

得分: 1

以下是您要翻译的内容：

问题很明显：

  1. final List<Object> imgListObject = [
  2.   {"image": "/imageAsset1", "text": 'Text 1'},
  3.   {"image": "/imageAsset2", "text": 'Text 2'},
  4.   {"image": "/imageAsset3", "text": 'Text 3'},
  5. ];

这是一个包含Object的List，所以当您稍后调用：

  1. Column(
  2.     children: [
  3.         Image.asset(data['image']),
  4.         Text(data['text']),
  5.     ],
  6. )

它无法访问data['image']，因为它认为它是一个Object而不是一个Map。

您将需要显式地转换类型。您可以使用as关键字来做到这一点：

  1. final List<Widget> imageSliders = imgListObject.map(
  2.     (item) {
  3.         Map<String, String> data = item as Map<String, String>;
  4.         return Column(
  5.             children: [
  6.                 // 使用`!`操作符来断言该值不为空
  7.                 Image.asset(data['image']!),
  8.                 Text(data['text']!),
  9.             ],
  10.         );
  11.     },
  12. ).toList();

或者作为另一种选择，为imgListObject指定正确的类型：

  1. final List<Map<String, String>> imgListObject = [
  2.     {"image": "/imageAsset1", "text": 'Text 1'},
  3.     {"image": "/imageAsset2", "text": 'Text 2'},
  4.     {"image": "/imageAsset3", "text": 'Text 3'},
  5. ];

参考链接

英文:

The problem is obvious:

  1.   final List&lt;Object&gt; imgListObject = [
  2.   {&quot;image&quot;: &quot;/imageAsset1&quot;, &quot;text&quot;: &#39;Text 1&#39;},
  3.   {&quot;image&quot;: &quot;/imageAsset2&quot;, &quot;text&quot;: &#39;Text 2&#39;},
  4.   {&quot;image&quot;: &quot;/imageAsset3&quot;, &quot;text&quot;: &#39;Text 3&#39;},
  5. ];

is a List of Object's, so when you later call:

  1. Column(
  2.             children: [
  3.               Image.asset(data[&#39;image&#39;]),
  4.               Text(data[&#39;text&#39;]),
  5.             ],

it can't access data[&#39;image&#39;] since it thinks it's an Object not a Map.

You'll have to explicitly cast the type. you can do so using the as keyword:

  1. final List&lt;Widget&gt; imageSliders = imgListObject.map(
  2.       (item) {
  3.         Map&lt;String, String&gt; data = item as Map&lt;String, String&gt;;
  4.         return Column(
  5.           children: [
  6.             // using the `!` operator to assert that the value is not null
  7.             Image.asset(data[&#39;image&#39;]!),
  8.             Text(data[&#39;text&#39;]!),
  9.           ],
  10.         );
  11.       },
  12.     ).toList();

Or as an alternative, specify the correct type for imgListObject:

  1. final List&lt;Map&lt;String, String&gt;&gt; imgListObject = [
  2.       {&quot;image&quot;: &quot;/imageAsset1&quot;, &quot;text&quot;: &#39;Text 1&#39;},
  3.       {&quot;image&quot;: &quot;/imageAsset2&quot;, &quot;text&quot;: &#39;Text 2&#39;},
  4.       {&quot;image&quot;: &quot;/imageAsset3&quot;, &quot;text&quot;: &#39;Text 3&#39;},
  5.     ];

See also

答案2

得分: 1

以下是翻译好的代码部分：

  1. const List<Object> imgListObject = [
  2.   {'image': '/imageAsset1', 'text': 'Text 1'},
  3.   {'image': '/imageAsset2', 'text': 'Text 2'},
  4.   {'image': '/imageAsset3', 'text': 'Text 3'},
  5. ];
  7. List<Column> columns() => [
  8.       for (final item in imgListObject)
  9.         Column(
  10.           children: switch (item) {
  11.             {
  12.               'image': final String image,
  13.               'text': final String text,
  14.             } =>
  15.                 [
  16.                   Image.asset(image),
  17.                   Text(text),
  18.                 ],
  19.             final v => throw Exception('what is $v'),
  20.           },
  21.         ),
  22.     ];
英文:

Here's another way to extract that, with patterns:

  1. const List&lt;Object&gt; imgListObject = [
  2.   {&#39;image&#39;: &#39;/imageAsset1&#39;, &#39;text&#39;: &#39;Text 1&#39;},
  3.   {&#39;image&#39;: &#39;/imageAsset2&#39;, &#39;text&#39;: &#39;Text 2&#39;},
  4.   {&#39;image&#39;: &#39;/imageAsset3&#39;, &#39;text&#39;: &#39;Text 3&#39;},
  5. ];
  7. List&lt;Column&gt; columns() =&gt; [
  8.       for (final item in imgListObject)
  9.         Column(
  10.           children: switch (item) {
  11.             {
  12.               &#39;image&#39;: final String image,
  13.               &#39;text&#39;: final String text,
  14.             } =&gt;
  15.               [
  16.                 Image.asset(image),
  17.                 Text(text),
  18.               ],
  19.             final v =&gt; throw Exception(&#39;what is $v&#39;),
  20.           },
  21.         ),
  22.     ];

huangapple
  • 本文由 发表于 2023年8月5日 03:33:49
  • 转载请务必保留本文链接：https://go.coder-hub.com/76838727.html
  • flutter
  • mapping
  • object
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定