有状态的小部件未重建

Question

在下面的代码中，有一个Greetings列表、一个Text小部件和一个"刷新"提升按钮。整个应用程序是一个Stateful小部件。当用户单击"刷新"按钮时，我希望文本更改为"用户"列表中的下一个问候语。

但是，当我运行它时，文本不会更改。所发生的一切都是"我们有更多的问候"文本被打印在终端中。

如果你知道如何解决这个问题，请帮忙！

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
var _greetingsIndex = 0;
var _greetings = [
"Hey, how are you!",
"Trust you're fine, my friend!",
"What's up!!!",
"How are you doing!",
];
void _refreshGreetings() {
setState(() {
_greetingsIndex = _greetingsIndex + 1;
});
if (_greetingsIndex < _greetings.length) {
print('We have more greetings');
} else {
setState(() {
_greetingsIndex = 0;
});
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Greetings app'),
),
body: Column(
children: [
Text(_greetings[0]),
ElevatedButton(
onPressed: _refreshGreetings, child: Text('Refresh'))
],
),
));
}
}

Answer 1

您有一个拼写错误-您总是显示索引为0的问候语。代替：

body: Column(
children: [
Text(_greetings[0]),
ElevatedButton(
onPressed: _refreshGreetings, child: Text('Refresh'))
],
)

使用

body: Column(
children: [
// this line needed fixing
Text(_greetings[_greetingsIndex]),
ElevatedButton(
onPressed: _refreshGreetings, child: Text('Refresh'))
],
)

Answer 2

它没有改变，因为您特别要求列表的第一个元素。状态在变化，索引也在变化，但您要求在代码中使用_greetings[0]。将Text(_greetings[0])更改为Text(_greetings[_greetingsIndex])，它应该可以正常工作。

顺便说一句，当到达列表的末尾时，这段代码将中断，因为您在检查长度之前正在重建。我建议把这件移走

setState(() {
_greetingsIndex = _greetingsIndex + 1;
});

在if语句内部，那么_refreshGreetings函数应该如下所示：

void _refreshGreetings() {
if (_greetingsIndex < _greetings.length) {
print('We have more greetings');
setState(() {
_greetingsIndex = _greetingsIndex + 1;
});
}
}

Answer 3

将此Text(_greetings[0])更改为this=>Text(_greetings[_greetingsIndex])。

以及您的刷新功能：

void _refreshGreetings() {
if (_greetingsIndex < _greetings.length) {
setState(() {
_greetingsIndex = _greetingsIndex + 1;
});
print('We have more greetings');
} else {
setState(() {
_greetingsIndex = 0;
});
}
}

它应该能解决你的问题。