Question

每按一次按钮是否可以更改文本3次？我试图使用if语句来做到这一点。但是，当用户第二次按下时，它将显示第三个文本。

RaisedButton(
                  child: Text('$_buttonText'),
                  onPressed: () {
                    setState(() {
                      if(!_isSecondPress) {
                      _text =
                          'First Text';
                      _buttonText = 'Pressed 1 times';
                      // _isSecondPress = true;
                      }

                      if (_isSecondPress) {
                         _text = 'Second Text';
                        _buttonText = 'Pressed 2 times';
                        print('It works');
                      }
                    });
                  },
                )

Answer 1

更新后的答案

在提供了您要执行的操作的代码示例后，我对问题有了更清晰的了解。

简介您要允许用户点击按钮3次。每次他们点击按钮时，您都希望显示不同的文本。您不需要动画，也不需要我先前认为的延迟。您只希望文本随着他们点击按钮而改变，但是您希望他们能够看到3个不同的值。

解决方案

这是更新的代码。您有一个原始文本值。然后，每次点击按钮后，您还将看到一个值。

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

class ChangeThrice extends StatefulWidget {
  const ChangeThrice({
    this.strings = const <String>[
      'original text',
      'pressed once',
      'pressed twice',
      'pressed a third time',
    ],
  });

  final List<String> strings;

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

class _ChangeThriceState extends State<ChangeThrice> {
  int index = 0;

  String _getLabelText() {
    return widget.strings[index];
  }

  @override
  Widget build(BuildContext context) {
    final List<Widget> children = <Widget>[];

    children.add(
      Text(
        widget.strings[index],
        style: TextStyle(
          fontSize: 40,
        )
      )
    );

    children.add(
      GestureDetector(
        onTap: _incIndex,
        child: Container(
          color: Colors.red,
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Text(
              'button',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ),
      )
    );

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: children,
    );
  }

  void _incIndex() {
    setState(() {
      if (index + 1 < widget.strings.length) {
        index += 1;
      }
    });
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  void didUpdateWidget(ChangeThrice oldWidget) {
    super.didUpdateWidget(oldWidget);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }
}

原始答案

有大量的小部件可用于为3个文本更改设置动画；但是，您在此处提供的信息量很小，如果没有这些信息，很难提出建议。

另一方面，如果您想跳过动画，只更改文本3次，请立即说一次，然后在接下来的两秒钟内每秒讲一次，您可以执行以下操作：

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

class ChangeThrice extends StatefulWidget {
  const ChangeThrice({
    this.strings = const <String>[
      // default list of strings
      'first string',
      'second string',
      'third string',
    ],
  });

  final List<String> strings;

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

class _ChangeThriceState extends State<ChangeThrice> {
  int index = 0;
  Timer secondStringTimer;
  Timer thirdStringTimer;

  @override
  Widget build(BuildContext context) {
    final List<Widget> children = <Widget>[];

    children.add(
      Text(
        widget.strings[index],
        style: TextStyle(
          fontSize: 40,
        )
      )
    );

    children.add(
      GestureDetector(
        onTap: () {
          // change once immediately
          _incIndex();

          // once more after 1 second
          // first cancel any second timer though
          if (secondStringTimer is Timer) {
            secondStringTimer.cancel();
          }
          secondStringTimer = Timer(
            Duration(seconds: 1),
            _incIndex,
          );

          // once more after 2 seconds
          // first cancel any existing third timer though
          if (thirdStringTimer is Timer) {
            thirdStringTimer.cancel();
          }
          thirdStringTimer = Timer(
            Duration(seconds: 2),
            _incIndex,
          );
        },
        child: Container(
          color: Colors.red,
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Text(
              'button',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ),
      )
    );

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: children,
    );
  }

  void _incIndex() {
    setState(() {
      index = (index + 1) % widget.strings.length;
    });
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  void didUpdateWidget(ChangeThrice oldWidget) {
    super.didUpdateWidget(oldWidget);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }
}

这是一个过于简单的示例，其中有一些实践可以被解释为“不良实践”，但至少应该让您了解如何使用Timer对象设置第二个和第三个文本更改。您还应该签出各种动画小部件，以使更改不那么刺耳。

另外，在我被召唤之前： -是的，有更好的方法可以做到这一点 -不，我不关心空的strings数组 -当然，请随时使用您的更出色的版本进行更新

每按一下按钮一次更新一次

1 个答案: