Flutter类型不匹配报错：如何正确访问Map中的Widget组件？

问题根源 #

你的代码中_pages被定义为List<Map<String, Object>>，导致Map中'page'对应的Widget被向上转型为Object类型。直接赋值给body时，Dart的类型检查会阻止Object?赋值给Widget?；而强制转换后出现的列表类型不匹配错误，大概率是代码中某处误将List<Widget>赋值给了List<Map<String, Object>>类型的变量。

最优解决方案：使用自定义类替代Map（类型安全） #

用自定义类封装页面信息，彻底避免类型转换问题，代码可读性和安全性更高：

import 'package:flutter/material.dart';

import '../screens/categories_screen.dart';
import '../screens/favorites_screen.dart';

// 新增自定义类封装页面数据
class PageItem {
  final Widget page;
  final String title;

  const PageItem({required this.page, required this.title});
}

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

  @override
  State<TabsScreenBottom> createState() => _TabsScreenBottomState();
}

class _TabsScreenBottomState extends State<TabsScreenBottom> {
  // 修改为自定义类的列表
  final List<PageItem> _pages = const [
    PageItem(page: CategoriesScreen(), title: 'Categories'),
    PageItem(page: FavoritesScreen(), title: 'My Favorites'),
  ];

  int _selectedPageIndex = 0;

  void _selectPage(int index) {
    setState(() {
      _selectedPageIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Meal'),
      ),
      // 直接访问属性，无需类型转换
      body: _pages[_selectedPageIndex].page,
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Theme.of(context).colorScheme.primary,
        selectedItemColor: Theme.of(context).colorScheme.secondary,
        unselectedItemColor: Colors.white,
        currentIndex: _selectedPageIndex,
        onTap: _selectPage,
        items: [
          BottomNavigationBarItem(
            backgroundColor: Theme.of(context).colorScheme.primary,
            icon: const Icon(Icons.category),
            label: 'Category',
          ),
          BottomNavigationBarItem(
            backgroundColor: Theme.of(context).colorScheme.primary,
            icon: const Icon(Icons.star),
            label: 'Favorites',
          ),
        ],
      ),
    );
  }
}

快速修复方案：调整Map类型为dynamic #

如果不想新增类，可以将_pages的类型改为List<Map<String, dynamic>>，让Dart放宽类型检查，再安全地强制转换：

// 修改类型为List<Map<String, dynamic>>
final List<Map<String, dynamic>> _pages = const [
  {
    'page': CategoriesScreen(),
    'title': 'Categories',
  },
  {
    'page': FavoritesScreen(),
    'title': 'My Favorites',
  },
];

// 在build方法中直接转换
body: _pages[_selectedPageIndex]['page'] as Widget,

注意事项 #

• 确保CategoriesScreen和FavoritesScreen的构造函数支持const（如果使用const列表），否则需要移除const关键字，避免编译错误。
• 检查代码中是否有其他地方错误地将List<Widget>赋值给_pages变量，这是你遇到第二个类型不匹配错误的主要原因。

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