按下按钮后更新文本 - 在 Flutter 中

Posted

技术标签:

【中文标题】按下按钮后更新文本 - 在 Flutter 中【英文标题】:Update Text after Button press - in Flutter 【发布时间】:2021-01-16 09:28:32 【问题描述】:

我目前正在开发随机辛普森剧集生成器。

我希望用户在按下一个按钮后获得一个随机季节和一个随机剧集。 目前“onpressed”启动了一个名为“randomEpisode”的函数。在那里,季节和剧集是随机挑选的。

现在我不知道如何更新显示季节和剧集的文本。

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

class Home extends StatefulWidget 
  @override
  _HomeState createState() => _HomeState();


class _HomeState extends State<Home> 

  Random random = new Random();
  int season = 0;
  int episode = 0;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.yellow,
      body: SafeArea(
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/Loading.jpg'),
              fit: BoxFit.fitWidth,
            ),
          ),
          child: Center(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  SizedBox(height: 40.0),
                  Text(
                    'Season: $season ',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 50.0,
                      letterSpacing: 2.0,
                      color: Colors.black,
                    ),
                  ),
                  SizedBox(height: 10.0),
                  Text(
                    'Episode:  $episode',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 50.0,
                      color: Colors.black,
                    ),
                  ),
                  SizedBox(height: 40.0),
                  RaisedButton(
                    onPressed: () => randomEpisode(),
                    color: Colors.blue,
                    elevation: 5,
                    child: const Text('Random',
                        style: TextStyle(
                          fontSize: 20,
                          color: Colors.black,
                        )),
                  ),
                ]),
          ),
        ),
      ),
    );
  


  randomEpisode() 
    List<int> numberepisodes = [
      13,
      22,
      24,
      22,
      22,
      25,
      25,
      25,
      25,
      23,
      22,
      21,
      22,
      22,
      22,
      21,
      22,
      22,
      20,
      21,
      23,
      22,
      22,
      22,
      22,
      22,
      22,
      22,
      21,
      23,
      22,
    ];

    Random random = new Random();
    int season;
    int episode;
    int maxseason;
    int maxepisode;
    //_changeEpisode();
    print('numberepisodes: $numberepisodes');
    maxseason = numberepisodes.length;
    print('maxseason $maxseason');
    season =
        1 + random.nextInt(numberepisodes.length - 1);

    print('season $season');
    maxepisode = numberepisodes[season - 1];
    print('maxepisodes $maxepisode');

    episode =
        1 + random.nextInt(numberepisodes[season - 1] - 1);
    print('Season: $season , Episode:  $episode');

  



【问题讨论】:

【参考方案1】:

randomEpisode()方法中移除下面的局部变量

int season;
int episode;

并在randomEpisode()方法的最后调用下面的方法。

setState(() );

【讨论】:

以上是关于按下按钮后更新文本 - 在 Flutter 中的主要内容,如果未能解决你的问题,请参考以下文章

Flutter:通过按下后退按钮解除键盘时,不关注文本字段(多行)

Flutter web,禁用Tab按下按钮上的焦点

删除项目后刷新列表 - Flutter

如何在flutter中调用函数后刷新页面?

Flutter 在按下按钮或 onpressed 事件后授予相机和麦克风权限

如何从 Flutter 中的其他 StatefulWidget 设置/更新 StatefulWidget 的状态?