Flutter/Dart -无法刷新静态变量的值

Question

我有这个:

class PageService {
static int CurrentPage = 0;
}

我有这个:

import 'package:flutter/material.dart';
import '../services/page_service.dart';
class NavigationMenu extends StatefulWidget {
const NavigationMenu({super.key});
@override
State<NavigationMenu> createState() => _NavigationMenuState();
}
class _NavigationMenuState extends State<NavigationMenu> {
@override
Widget build(BuildContext context) {
return NavigationBar(
destinations: const [
NavigationDestination(
icon: Icon(
Icons.home,
color: Colors.white,
),
label: "Home"),
NavigationDestination(icon: Icon(Icons.forum), label: "Forums"),
],
backgroundColor: const Color.fromARGB(255, 154, 15, 5),
onDestinationSelected: (int index) {
setState(() {
PageService.CurrentPage = index;
int test = PageService.CurrentPage;
print("SETTING $test");
});
},
selectedIndex: PageService.CurrentPage,
);
}
}

然后在我的main中，我有这个:

void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'BeastBurst',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.red,
),
home: const BeastBurst(title: 'BeastBurst'),
);
}
}
class BeastBurst extends StatefulWidget {
const BeastBurst({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<BeastBurst> createState() => _BeastBurstState();
}
class _BeastBurstState extends State<BeastBurst> {
int _counter = 0;
bool _loggedIn = false;
List<Widget> pages = const [HomePage(), Forums()];
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
body: pages[PageService.CurrentPage],
// This trailing comma makes auto-formatting nicer for build methods.
);
}
}

当我在导航菜单上导航时，我看到打印的输出如下:

SETTING 1
SETTING 0
SETTING 1
SETTING 1

然而，除非我在VSCode编辑器上按下CRTL+S，否则页面切换不会发生。看起来它只在编辑器保存中读取PageService.CurrentPage的值。

这个问题发生在我将PageService.CurrentPage设置为静态时。知道这是为什么吗?我该如何解决?

Answer 1

实际上在这里，在您的NavigationMenu类中，您正在更新类的状态，而不是它的父类，其中您使用NavigationMenu，这就是为什么父类的状态没有改变，构建方法没有被召回，PageService.CurrentIndex的更新值不再被引用。

在你使用NavigationMenu的课堂上:

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
bottomNavigationBar: NavigationMenu(
onDestinationSelected: (index) {
setState(() {
PageService.CurrentPage = index;
int test = PageService.CurrentPage;
print("SETTING $test");
});
},
),
body: pages[PageService.CurrentPage],
);
}

更新NavigationMenu类:

class NavigationMenu extends StatefulWidget {
final Function(int) onDestinationSelected;
const NavigationMenu({super.key, required this.onDestinationSelected});
@override
State<NavigationMenu> createState() => _NavigationMenuState();
}
class _NavigationMenuState extends State<NavigationMenu> {
@override
Widget build(BuildContext context) {
return NavigationBar(
destinations: const [
NavigationDestination(
icon: Icon(
Icons.home,
color: Colors.white,
),
label: "Home"),
NavigationDestination(icon: Icon(Icons.forum), label: "Forums"),
],
backgroundColor: const Color.fromARGB(255, 154, 15, 5),
onDestinationSelected: widget.onDestinationSelected,
selectedIndex: PageService.CurrentPage,
);
}
}

备选解决方案:

在您的NavigationMenu类中，更改:

onDestinationSelected: (int index) {
setState(() {
PageService.CurrentPage = index;
int test = PageService.CurrentPage;
print("SETTING $test");
});
}

:

onDestinationSelected: (int index) {
final parentState = context.findAncestorStateOfType<_MyHomePageState>();

parentState?.setState(() {
PageService.CurrentPage = index;
int test = PageService.CurrentPage;
print("SETTING $test");
});
}

注意:将_MyHomePageState更改为使用NavigationMenu的类状态。

Answer 2

您需要将主部件设置为StatefulWidget，同时也将在这里更新UI。我使用回调方法，而不是全局变量。

class NavigationMenu extends StatefulWidget {
const NavigationMenu({super.key, required this.selected});
final Function(int) selected;

//....
onDestinationSelected: (int index) {
widget.selected(index);//update parent callback
setState(() {});
},
selectedIndex: PageService.CurrentPage,
);
}

和用例

class _ExampleScreenState extends State<ExampleScreen> {
int activeIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: NavigationMenu(
selected: (p0) {
//PageService.CurrentPage=0;
activeIndex = p0;
setState(() {});
},
),
body: [Text("a"), Text("B")][activeIndex] //PageService.CurrentPage