有状态小部件不重建

Question

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

但是，当我运行它时，文本没有改变。所发生的只是 'We have more greetings' 文本在终端中打印出来。

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

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]) 更改为此 => Text(_greetings[_greetingsIndex])。

以及您对此的刷新功能：

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

应该可以解决您的问题。

有状态小部件不重建

Stateful widget not rebuilding

mobile

stateful

dart

flutter

statefulwidget