Flutter 2空安全下如何通过List的mapIndex方法生成Row子组件

问题原因 #

• 你的icons属性定义为可空类型List<Map<String, dynamic>>?，空安全规则下不允许直接对可空对象调用实例方法
• Dart标准库没有内置mapIndex扩展方法，旧版本可正常使用是因为你之前要么引入了collection第三方包的扩展方法，要么自己实现了非空安全的mapIndex扩展，升级后未做适配
• 示例代码中map操作后未调用toList()，Row的children属性要求传入List<Widget>类型，直接返回Iterable也会触发类型报错
• 空安全下@required注解已废弃，必填参数需使用required关键字声明

修复方案 #

这里提供不需要引入额外第三方包的修复方案，直接用Dart内置方法实现带索引的遍历：

import 'package:flutter/material.dart';

class NavigationBar extends StatefulWidget {
  // 如果你确定icons一定不会传空，可以去掉?同时保留required声明
  // 这里保留可空定义兼容原有逻辑
  final List<Map<String, dynamic>>? icons;

  const NavigationBar({
    required this.icons, // 空安全下必填参数用required关键字
    Key? key
  }) : super(key: key);

  @override
  _NavigationBarState createState() => _NavigationBarState();
}

class _NavigationBarState extends State<NavigationBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 40,
      child: Row(
        // 处理逻辑：icons为空时返回空数组，非空时转asMap遍历同时拿索引和值
        children: widget.icons?.asMap().entries.map((entry) {
          int index = entry.key;
          Map<String, dynamic> iconConfig = entry.value;
          // 这里替换成你自己的图标组件逻辑即可
          return Icon(iconConfig['icon'], color: iconConfig['color']);
        }).toList() ?? [],
      ),
    );
  }
}

如果你还是想沿用mapIndex的写法，可以自己实现空安全的扩展方法，添加到公共工具类即可：

extension IterableExtension<T> on Iterable<T> {
  Iterable<E> mapIndex<E>(E Function(int index, T item) f) {
    var index = 0;
    return map((item) => f(index++, item));
  }
}

调用时同样要做可空判断：

children: widget.icons?.mapIndex((i, icon) => Container()).toList() ?? []

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