标签按钮后如何从列表中随机选择一个字符串

Question

我想按一个按钮并从我的列表中选择一个随机字符串以显示在屏幕上的某个位置。

当前，构建器中的 convoTopic 变量正在运行错误。

感谢任何帮助！

以下是我截断的代码：

final List<String> ConvoTopics = [
'blah blah',
'black sheep',
'balh bath'
];

class ConvoPage extends StatefulWidget {

  @override
  _ConvoPageState createState() => _ConvoPageState();
}

class _ConvoPageState extends State<ConvoPage> 

  @override
  Widget build(BuildContext context) {
    void generateConvoTopic() {
      final _random = Random();
      var convoTopic = ConvoTopics[_random.nextInt(ConvoTopics.length)];
      print(convoTopic);
    }

    return Scaffold(
      backgroundColor: Color(0xff04072E),
      appBar: AppBar(
        title: Text('Convo', style: TextStyle(color: Colors.white)),
        backgroundColor: Color(0xff04072E),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(children: <Widget>[
            Container(
                child: Align(
                    alignment: Alignment.center,
                    child: Text(convoTopic,
                    ),
// where randomized string appears
              ),
            ),
            ElevatedButton(
            
              onPressed: () async {
                generateConvoTopic();
              },
    // button's function is to randomize convo topic
              child: Container(
                child: Text('Get Convo'),
              ),
            ),
:
:
:

Answer 1

你的方法大部分是正确的。

你错过的三件小事是

1. 您应该在您的State 类中定义您的generateConvoTopic，而不是build 方法。

2. 您的convoTopic 应该是State 类变量。您当前正在 function 方法内的 build 内定义它。所以它只能在你的function 中访问，但你需要更新它并阅读它，所以它将进入State 类。

3. 当您想更新State 类的任何变量时，您应该调用setState。在你的情况下，convoTopic 在你执行第 2 步之后。

4. 列表项

;

final List<String> ConvoTopics = ['blah blah', 'black sheep', 'balh bath']
class ConvoPage extends StatefulWidget {
  @override
  _ConvoPageState createState() => _ConvoPageState();
}

class _ConvoPageState extends State<ConvoPage> {
  String convoTopic;

  void generateConvoTopic() {
    setState(() {
      convoTopic = ConvoTopics[Random().nextInt(ConvoTopics.length)];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xff04072E),
      appBar: AppBar(
        title: Text('Convo', style: TextStyle(color: Colors.white)),
        backgroundColor: Color(0xff04072E),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
            child: Column(children: <Widget>[
              Container(
                child: Align(
                  alignment: Alignment.center,
                  child: Text(convoTopic),
                ),
              ),
              ElevatedButton(
                onPressed: () async {
                  generateConvoTopic();
                },
                child: Container(
                  child: Text('Get Convo'),
                ),
              ),
    ]))));
  }
}