Flutter中修改foodindex报错：setState未定义如何解决？

我希望实现点击按钮跳转至Recipes页面时修改foodindex的值，按钮代码如下：

SizedBox(height: 20.0),
FractionallySizedBox(
  widthFactor: 0.95, // 95% of the screen width
  child: ElevatedButton(
    onPressed: () {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => const Recipes()),
      );
      foodindex = 1;
    },
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.navigate_next),
        const SizedBox(width: 8.0),
        const Text('Chicken Alfredo',style: TextStyle(fontSize: 20.0, ),),
      ],
    ),
  ),
),

我尝试编写了如下change函数来更新值：

void change(int n) {
    setState(() {
      foodindex += 1;
    });
}

但setState被标红，提示“函数未定义”，请问该如何解决这个问题？

问题原因及解决步骤 #

1. setState仅适用于StatefulWidget的State类
   setState是Flutter中State类的内置方法，只能在StatefulWidget对应的State类中调用。如果你的当前页面是StatelessWidget，就会出现“函数未定义”的错误。需要将当前页面改为StatefulWidget，并在其State类中定义foodindex变量和更新方法。

2. 页面跳转时传递值的正确方式
   你当前在Navigator.push后修改foodindex的操作无效：一方面Navigator.push是异步操作，另一方面跳转后的Recipes页面无法获取当前页面的变量值。正确做法是通过Recipes页面的构造函数直接传递参数。

修正后的示例代码 #

1. 将当前页面改为StatefulWidget

class CurrentPage extends StatefulWidget {
  const CurrentPage({super.key});

  @override
  State<CurrentPage> createState() => _CurrentPageState();
}

class _CurrentPageState extends State<CurrentPage> {
  int foodindex = 0; // 初始化变量

  void updateIndexAndNavigate(int newIndex) {
    setState(() {
      foodindex = newIndex; // 更新当前页面的foodindex
    });
    // 跳转并将参数传递给Recipes页面
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => Recipes(foodindex: foodindex)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(height: 20.0),
          FractionallySizedBox(
            widthFactor: 0.95,
            child: ElevatedButton(
              onPressed: () {
                updateIndexAndNavigate(1); // 调用方法完成更新与跳转
              },
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: const [
                  Icon(Icons.navigate_next),
                  SizedBox(width: 8.0),
                  Text('Chicken Alfredo', style: TextStyle(fontSize: 20.0)),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

2. 修改Recipes页面接收参数

class Recipes extends StatelessWidget {
  final int foodindex;

  // 通过构造函数接收传递的参数
  const Recipes({super.key, required this.foodindex});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 在Recipes页面中使用传递过来的foodindex
      body: Center(child: Text('当前索引：$foodindex')),
    );
  }
}

关键说明 #

• StatefulWidget的State类是唯一能调用setState的上下文，用于触发当前页面的UI更新。
• 跨页面传递数据时，通过目标页面的构造函数传参是最直接可靠的方式，无需依赖当前页面的变量状态。

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