Flutter上有状态小部件中未显示文本

Question

我正在尝试创建一个非常简单的应用程序，当点击中心小部件时，列表中的元素会显示出来。

这是我的代码：

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

void main() => runApp(
      MaterialApp(home: MyApp()),
    );

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(),
      ),
    );
  }
}

class picker extends StatefulWidget {
  @override
  _pickerState createState() => _pickerState();
}

class _pickerState extends State<picker> {
  List yourList = ["Yes", "No", "Maybe"];
  int randomIndex;

  _pickerState() {
    int randomIndex = Random().nextInt(yourList.length);
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextButton(
        onPressed: () {
          setState(() {
            print(yourList[randomIndex]);
          });
        },
        child: Text('$randomIndex'),
      ),
    );
  }
}

没有显示任何错误，但同时，我的目标没有达到，因为没有显示任何文本，即使我添加了这个代码打印(yourList[randomIndex])，也不会在终端中打印任何内容；。我如何显示文本，并使打印出现？

Answer 1

尝试使用＜code＞这个。randomIndex=Random（）.nextInt（yourList.length） 。

否则，您将在初始化类时声明一个不同的局部变量。

下次尝试通过在初始化之外设置默认值来调试此错误，以检查是否存在类似问题，例如您的初始化没有进入您的状态。

我还建议您将类名更改为CamelCase，以避免混淆，这样人们就可以看到初始化类时的代码。这是一篇关于样式代码的dart文章。

Answer 2

两个错误：

1. 您没有将值赋给您实际想要在此处使用的变量：

  int randomIndex;

  _pickerState() {
    // you declared a local variable here and you were using value of variable you declared on top
    int randomIndex = Random().nextInt(yourList.length);
  }

这是工作代码，您可以简单地复制粘贴它：

class _PickerState extends State<Picker> {
  List yourList = ["Yes", "No", "Maybe"];
  int randomIndex;

  _pickerState() {
    randomIndex = Random().nextInt(yourList.length);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          onPressed: () {
            _pickerState();
            setState(() {
              print(yourList[randomIndex]);
            });
          },
          child: Text('$randomIndex'),
        ),
      ),
    );
  }
}

快速提示：尝试使用＜code＞大写

Answer 3

另一种解决方案是设置

randomIndex = Random().nextInt(yourList.length);

在setState（（）{）中，如下所示。

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

void main() => runApp(
      MaterialApp(home: MyApp()),
    );

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: picker(),
      ),
    );
  }
}

class picker extends StatefulWidget {
  @override
  _pickerState createState() => _pickerState();
}

class _pickerState extends State<picker> {
  List yourList = ["Yes", "No", "Maybe"];
  int randomIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextButton(
        onPressed: () {
          setState(() {
            randomIndex = Random().nextInt(yourList.length);
          });
        },
        child: Text(yourList[randomIndex]),
      ),
    );
  }
}

要获得起始文本，需要在一个单独的函数中取出setState，如下所示:

class _pickerState extends State<picker> {
 List yourList = ["Yes", "No", "Maybe"];
 String buttonText = "Initial Text";
 int randomIndex = 0;
 
 void _newRandomIndex() {
   setState(() {
     randomIndex = Random().nextInt(yourList.length);
     buttonText = yourList[randomIndex];
   });
 }

 @override
 Widget build(BuildContext context) {
   return Center(
     child: TextButton(
       onPressed: _newRandomIndex,
       child: Text(buttonText),
     ),
   );
 }
}