有状态小部件未重建答案

【问题标题】：Stateful widget not rebuilding有状态小部件未重建
【发布时间】：2021-06-24 18:14:10
【问题描述】：

在下面的代码中，有一个问候列表、一个文本小部件和一个“刷新”高架按钮。整个应用程序是一个有状态的小部件。当用户单击刷新按钮时，我希望文本更改为用户列表中的下一个问候语。

但是，当我运行它时，文本并没有改变。所发生的只是“我们有更多的问候”文本被打印在终端中。

如果您知道如何解决此问题，请提供帮助！

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'))
            ],
          ),
        ));
  }
}

【问题讨论】：

谢谢大家。将 _greetings[0] 更改为 _greetings[_greetingsIndex] 有效！注意：当我将第一个 setState 方法移到 if 语句中时，我遇到了范围错误。

标签： flutter dart mobile stateful statefulwidget

【解决方案1】：

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

还有你的刷新功能：

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

应该可以解决你的问题。

【讨论】：

【解决方案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;
    });
  }
}

【讨论】：

【解决方案3】：

你有一个错字 - 你总是用索引 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'))
            ],
          )

【讨论】：