Question

我将bottomNavigationBar与两个我在地图中定义的项目一起使用：

final List<Map<String, Object>> _pages = [
{
  'page': CategoriesScreen(),//My categories widget
  'title': 'Categories',//title of current page (with navigation bar)
},
{
  'page': FavoritesScreen(),//My favorites widget
  'title': 'Your Favorite',//title of current page (with navigation bar)
},

];

当我这样使用它时：

return Scaffold(
  appBar: AppBar(
    title: Text(_pages[_selectedPageIndex]['title']),
  ),
  body: _pages[_selectedPageIndex]['page'],//<----- ERROR HERE
  bottomNavigationBar: BottomNavigationBar(....

当我尝试从Android Studio运行该应用程序时，出现错误消息：

类型'String'不是强制类型转换中类型'Widget'的子类型

知道为什么吗？

更新1（完整代码）：

import 'package:flutter/material.dart';    
import './favorites_screen.dart';
import './categories_screen.dart';

class TabsScreen extends StatefulWidget {
  @override
  _TabsScreenState createState() => _TabsScreenState();
}

class _TabsScreenState extends State<TabsScreen> {

  final List<Map<String, Object>> _pages = [
    {
      'page': CategoriesScreen(),
      'title': 'Categories',
    },
    {
      'page': FavoritesScreen(),
      'title': 'Your Favorite',
    },
  ];
  
  int _selectedPageIndex = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_pages[_selectedPageIndex]['title']),
      ),
      body: _pages[_selectedPageIndex]['page'],
      bottomNavigationBar: BottomNavigationBar(
        onTap: _selectPage,
        backgroundColor: Theme.of(context).primaryColor,
        unselectedItemColor: Colors.white,
        selectedItemColor: Theme.of(context).accentColor,
        currentIndex: _selectedPageIndex,
        // type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            backgroundColor: Theme.of(context).primaryColor,
            icon: Icon(Icons.category),
            title: Text('Categories'),
          ),
          BottomNavigationBarItem(
            backgroundColor: Theme.of(context).primaryColor,
            icon: Icon(Icons.star),
            title: Text('Favorites'),
          ),
        ],
      ),
    );
  }
}

谢谢

Answer 1

您无需将其放入地图中。只需使用_pages的List 并将标题添加到TabsScreen的State小部件即可。

import 'package:flutter/material.dart';    
import './favorites_screen.dart';
import './categories_screen.dart';

class TabsScreen extends StatefulWidget {
  @override
  _TabsScreenState createState() => _TabsScreenState();
 }

 class _TabsScreenState extends State<TabsScreen> {

  final List<Widget> _pages = [
    CategoriesScreen(),
    FavoritesScreen(),
  ];

  String title = 'Categories';

  int _selectedPageIndex = 0;

  void _selectPage(int index) {
    setState(() {
      _selectedPageIndex = index;
      if (_selectedPageIndex == 0) {
          title = 'Categories';
      } else if (_selectedPageIndex == 1) {
          title = 'Your Favorite';
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: _pages[_selectedPageIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: _selectPage,
        backgroundColor: Theme.of(context).primaryColor,
        unselectedItemColor: Colors.white,
        selectedItemColor: Theme.of(context).accentColor,
        currentIndex: _selectedPageIndex,
        // type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            backgroundColor: Theme.of(context).primaryColor,
            icon: Icon(Icons.category),
            title: Text('Categories'),
          ),
          BottomNavigationBarItem(
            backgroundColor: Theme.of(context).primaryColor,
            icon: Icon(Icons.star),
            title: Text('Favorites'),
          ),
        ],
      ),
    );
  }
}

我仍在寻找一种更优雅的实现方式，但是这种方法有效。

Answer 2

按照你的代码，这是你应该做的

import 'package:flutter/material.dart';

import './categories_screen.dart';
import './favourite_screen.dart';

class TabsScreeen extends StatefulWidget {
  @override
  _TabsScreeenState createState() => _TabsScreeenState();
}

class _TabsScreeenState extends State<TabsScreeen> {
  final List<Map<String, Object>> _pages = [
    {
      "page": CategoriesScreen(),
      "title": "Categories",
    },
    {
      "page": FavouriteScreen(),
      "title": "Favourites",
    }
  ];

  int _selectedPageIndex = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_pages[_selectedPageIndex]['title']),
      ),
      body: _pages[_selectedPageIndex]['page'],
      bottomNavigationBar: BottomNavigationBar(
        unselectedItemColor: Colors.black38,
        selectedItemColor: Colors.white,
        backgroundColor: Theme.of(context).primaryColor,
        onTap: _selectPage,
        currentIndex: _selectedPageIndex,
        items: [
          BottomNavigationBarItem(
            backgroundColor: Colors.orangeAccent,
            icon: Icon(
              Icons.category,
            ),
            label: 'Categories',
          ),
          BottomNavigationBarItem(
            backgroundColor: Colors.orangeAccent,
            icon: Icon(
              Icons.favorite,
            ),
            label: 'Favourites',
          )
        ],
      ),
    );
  }
}

flutter映射错误：类型转换中类型'String'不是类型'Widget'的子类型

2 个答案: