Flutter：单击 MaterialButton 时更新屏幕上的文本答案

【问题标题】：Flutter: Update text on screen when MaterialButton is clickedFlutter：单击 MaterialButton 时更新屏幕上的文本
【发布时间】：2021-11-23 10:53:15
【问题描述】：

我是 Flutter 的新手。我正在尝试使用按钮构建一个基本的骰子应用程序。单击按钮时，显示的文本会更新为随机数。

import 'package:flutter/material.dart';
import 'dart:math';

int dice = 0;

void main() {
  int dice = 0;
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white70,
        appBar: AppBar(
          title: const Text('Quick Dice'),
          backgroundColor: Colors.blueGrey,
        ),
        body: Center(
          child: MaterialButton(
            onPressed: () {
              rollDice();
            },
            child: new Text('$dice'),
          ),
        ),
      ),
    ),
  );
}

void rollDice(){
  dice = Random().nextInt(6) + 1;
  print('In Roll Dice()');
  print('$dice');
}

单击按钮时，我可以看到正在调用函数 rollDice() 并且正在更新 $dice 的值，但在屏幕上，该值永远不会更新。

我有什么遗漏吗？是否应该以某种方式刷新子文本元素以在按钮按下时显示新值？

【问题讨论】：

你应该在 rollDice() 方法中使用 setState()。

标签： flutter dart

【解决方案1】：

这样做（StatefulWidget）：

void main(){
  runApp(MaterialApp(
    home: UpdateScreen(),
  ));
}

class UpdateScreen extends StatefulWidget{
  @override
  UpdateScreenState createState() => UpdateScreenState();

}

class UpdateScreenState extends State<UpdateScreen>{

  int dice = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white70,
      appBar: AppBar(
        title: const Text('Quick Dice'),
        backgroundColor: Colors.blueGrey,
      ),
      body: Center(
        child: MaterialButton(
          onPressed: () {
            rollDice();
          },
          child: new Text('$dice'),
        ),
      ),
    );
  }

  void rollDice(){
    setState(() {
      dice = Random().nextInt(6) + 1;
      print('In Roll Dice()');
      print('$dice');
    });
  }

}

【讨论】：

谢谢。我不明白屏幕是如何更新的。但这有效。 :)
当您使用 StatefulWidget 小部件并 setState 时，将显示类、小部件重建和您更改的数据

【解决方案2】：

试试下面的代码希望对你有帮助。

参考随机here

并使用 dart.math 库here

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(MaterialApp(
    home: DiceApp(),
  ));
}

class DiceApp extends StatefulWidget {
  @override
  DiceAppState createState() => DiceAppState();
}

var randomNo = new Random();
var dice = randomNo.nextInt(6) + 1;

class DiceAppState extends State<DiceApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Dice App'),
      ),
      body: Center(
        child: MaterialButton(
          color: Colors.blue,
          onPressed: () {
            setState(() {
              dice = randomNo.nextInt(6) + 1;
            });
          },
          child: Text(
            dice.toString(),
          ),
        ),
      ),
    );
  }
 }

您的结果屏幕-> |

【讨论】：

【解决方案3】：

要在屏幕上更新您的数据，您必须使用提供程序、Getx、block 等状态管理。或者您可以在 rollDice() 函数中使用 setState 方法，然后小部件将重建并且您的数据将被更新。像这样的——

void rollDice(){
   setState(() {
    dice = Random().nextInt(6) + 1
    });
  print('In Roll Dice()');
  print('$dice');
}

【讨论】：