Flutter底部导航栏setState报错及路由配置求助

一、解决setState报错问题 #

报错提示“The method setState isn't define for the type 'HomeScreen'”，核心原因有两点：

1. 组件类型错误：HomeScreen继承自StatelessWidget，无状态组件不具备状态更新能力，只有StatefulWidget的State类才能调用setState方法。
2. 方法名拼写错误：代码中写的是大写开头的SetState，正确写法应为小写开头的setState。

修改后的完整代码：

import 'package:flutter/material.dart';
import 'package:the_kitchen/constants/global_variables.dart';
import 'package:the_kitchen/services/bartanlist_page.dart';
import 'package:the_kitchen/services/bills_page.dart';
import 'package:the_kitchen/services/grocery_page.dart';
import 'package:the_kitchen/services/quotation_page.dart';
import 'package:the_kitchen/services/sabjilist_page.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  static final List<Widget> _widgetOptions = <Widget>[
    const GroceryPage(),
    const QuotationPage(),
    const BillsPage(),
    const SabjiList(),
    const BartanListPage(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _widgetOptions.elementAt(_selectedIndex),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: GlobalVariables.secondaryColor,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              label: 'Dashboard',
              icon: Icon(Icons.home),
              backgroundColor: GlobalVariables.secondaryColor),
          BottomNavigationBarItem(
              label: 'Lists',
              icon: Icon(Icons.reorder_rounded),
              backgroundColor: GlobalVariables.secondaryColor),
          BottomNavigationBarItem(
              label: 'Quotations',
              icon: Icon(Icons.dashboard_rounded),
              backgroundColor: GlobalVariables.secondaryColor),
          BottomNavigationBarItem(
              label: 'Categories',
              icon: Icon(Icons.category),
              backgroundColor: GlobalVariables.secondaryColor),
          BottomNavigationBarItem(
              label: 'Bills',
              icon: Icon(Icons.paste_rounded),
              backgroundColor: GlobalVariables.secondaryColor),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

二、底部导航栏对应页面的路由配置方案 #

方案1：全局命名路由（推荐） #

适合需要全屏跳转页面、共享路由栈的场景：

1. 在main.dart中定义全局路由表：

import 'package:flutter/material.dart';
import 'package:the_kitchen/screens/home_screen.dart';
import 'package:the_kitchen/services/bartanlist_page.dart';
import 'package:the_kitchen/services/bills_page.dart';
import 'package:the_kitchen/services/grocery_page.dart';
import 'package:the_kitchen/services/quotation_page.dart';
import 'package:the_kitchen/services/sabjilist_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'The Kitchen',
      initialRoute: '/',
      routes: {
        '/': (context) => const HomeScreen(),
        '/grocery': (context) => const GroceryPage(),
        '/quotation': (context) => const QuotationPage(),
        '/bills': (context) => const BillsPage(),
        '/sabjiList': (context) => const SabjiList(),
        '/bartanList': (context) => const BartanListPage(),
      },
    );
  }
}

2. 修改HomeScreen的切换逻辑：

void _onItemTapped(int index) {
  switch(index) {
    case 0:
      Navigator.pushNamed(context, '/grocery');
      break;
    case 1:
      Navigator.pushNamed(context, '/quotation');
      break;
    case 2:
      Navigator.pushNamed(context, '/bills');
      break;
    case 3:
      Navigator.pushNamed(context, '/sabjiList');
      break;
    case 4:
      Navigator.pushNamed(context, '/bartanList');
      break;
  }
}

方案2：保留底部导航栏的页面切换 #

适合切换页面时底部导航栏常驻、需要保留页面状态的场景，使用IndexedStack避免页面重建：

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    const GroceryPage(),
    const QuotationPage(),
    const BillsPage(),
    const SabjiList(),
    const BartanListPage(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _selectedIndex,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        // 保留原导航栏配置
        type: BottomNavigationBarType.fixed,
        backgroundColor: GlobalVariables.secondaryColor,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              label: 'Dashboard',
              icon: Icon(Icons.home),
              backgroundColor: GlobalVariables.secondaryColor),
          BottomNavigationBarItem(
              label: 'Lists',
              icon: Icon(Icons.reorder_rounded),
              backgroundColor: GlobalVariables.secondaryColor),
          BottomNavigationBarItem(
              label: 'Quotations',
              icon: Icon(Icons.dashboard_rounded),
              backgroundColor: GlobalVariables.secondaryColor),
          BottomNavigationBarItem(
              label: 'Categories',
              icon: Icon(Icons.category),
              backgroundColor: GlobalVariables.secondaryColor),
          BottomNavigationBarItem(
              label: 'Bills',
              icon: Icon(Icons.paste_rounded),
              backgroundColor: GlobalVariables.secondaryColor),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

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