如何调用或找到一种方法来让底部导航栏与 Flutter 中的无状态小部件一起使用?

Question

static List<Widget> _pages = <Widget>[
inputPage(),
leaderboardsPage(),
userInfo(),
];

我有上面的小部件列表，无状态小部件类之一

初始化如下：

class userInfo extends StatelessWidget {

它们在底部导航栏中调用，如下所示

child: _pages.elementAt(_selectedIndex),

但是，我需要将用户信息更改为

class userInfo extends State<ProfilePage> {

因为我需要使用 setState()，如果用户 Info() 是无状态小部件，我就无法使用 setState。

您能想到的任何解决方法。我对 Flutter 和 Dart 相当陌生，所以我对 Widgets 和 State 一无所知。下面是所需的代码：

class ProfilePage extends StatefulWidget {
final User user;
ProfilePage({required this.user});
@override
_ProfilePageState createState() => _ProfilePageState();
}
class _ProfilePageState extends State<ProfilePage> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
static List<Widget> _pages = <Widget>[
inputPage(),
leaderboardsPage(),
userInfo(),
];

class userInfo extends State<ProfilePage> {
userInfo();
bool _isSendingVerification = false;
bool _isSigningOut = false;
late User _currentUser;
@override
void initState() {
_currentUser = widget.user;
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Sakirt Meter'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 50.0),
child: Image.asset('assets/icon.png', fit: BoxFit.contain, height: 100),
//child: Text('Login', style: Theme.of(context).textTheme.headline1,),
),
Text(
'NAME: ${_currentUser.displayName}',
.
.
.

Answer 1

我不完全明白你在做什么，但我会让你知道你绝对不应该为另一个有状态小部件声明自己的State类，你应该创建一个新的有状态小部件：

class UserInfo extends StatefulWidget {

@override
_UserInfoState createState() => _UserInfoState();
}
class _UserInfoState extends State<UserInfo> {
...
}

如果您需要从UserInfo访问ProfilePage的值，则应通过将所述值作为参数传递：

class UserInfo extends StatefulWidget {
const UserInfo({required this.user});
final User user;
@override
_UserInfoState createState() => _UserInfoState();
}
class _UserInfoState extends State<UserInfo> {
@override
void initState() {
_currentUser = widget.user;
super.initState();
}
}

然后在ProfilePage上，您还需要进行一些更改：

List<Widget> get _pages => <Widget>[
inputPage(),
leaderboardsPage(),
userInfo(user: widget.user),
];

_pages不能是静态的，因为它使用user，这不是静态的，我也把它变成了一个 getter，所以即使user发生变化，它也能正常工作。

如果你想要从UserInfo重建或调用ProfilePage上的setstate，你可以使用回调。

假设我想ProfilePage按下UserInfo上的按钮进行重建：

lass UserInfo extends StatefulWidget {
const UserInfo({required this.user, required this.onChanged});
final User user;
final VoidCallback? onChanged
@override
_UserInfoState createState() => _UserInfoState();
}
class _UserInfoState extends State<UserInfo> {
@override
void initState() {
_currentUser = widget.user;
super.initState();
}
@override
Widget build(BuildContext context) {
return ElevatedButton(
child: Text('press me!'),
onPressed: widget.onChanged,
);
}
}

然后在页面获取器上：

List<Widget> get _pages = <Widget>[
inputPage(),
leaderboardsPage(),
userInfo(
user: widget.user, 
onPressed: () => setState(() {
// some code or something :)
}),
),
];