Flutter报错List<dynamic>不是List<Widget>子类型，如何适配ListView组件？

问题根因 #

ListView的children参数要求必须传入List<Widget>类型的数组，你代码中传入的widget.value是未指定泛型的List<dynamic>，类型不匹配触发报错。

使用map方法的解决方案 #

map的作用是遍历原列表的每一个元素，按照你自定义的规则把元素转换成Widget，最终生成符合要求的List<Widget>，修改后的代码如下：

import 'package:flutter/material.dart';

class NextPage extends StatefulWidget {
  final List value;

  NextPage({Key key, this.value}) : super(key: key);

  @override
  _NextPageState createState() => new _NextPageState();
}

class _NextPageState extends State<NextPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Reminders"),
      ),
      body: ListView(
        // 核心修改部分
        children: widget.value.map((item) {
          // 此处可根据业务需求自定义展示组件，示例用ListTile展示文本内容
          return ListTile(
            title: Text(item.toString()),
          );
        }).toList(),
      ),
    );
  }
}

核心注意事项 #

• 必须在map后调用.toList()：Dart中map方法默认返回的是Iterable类型，和List类型不兼容，漏写会触发新的类型报错
• 可以提前给value指定泛型，比如你确认传入的是字符串数组，就把final List value;改成final List<String> value;，减少运行时类型判断开销
• map内的转换逻辑完全自定义，要展示图片就返回Image组件，要展示自定义布局就返回对应的容器组件即可

替代转换方案（手动循环构建） #

如果暂时对map用法不熟悉，也可以手动遍历列表构建Widget数组，效果完全一致：

class _NextPageState extends State<NextPage> {
  // 提前构建Widget列表
  List<Widget> _buildListItems() {
    List<Widget> items = [];
    for (var element in widget.value) {
      items.add(Text(element.toString()));
    }
    return items;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Reminders"),
      ),
      body: ListView(
        children: _buildListItems(),
      ),
    );
  }
}

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