Question

这是我的代码：

<Dialog>
  renderTitle={renderTitle}
  renderContent={renderContent}
  renderAction={renderAction}
</Dialog>

const [input, setInput] = useState('')

const renderContent = () => {
 return (
  <form>
   <input>
    type="text"
    onChange={e => setInput(e.target.value)}
    value={input}
    placeholder='Enter MapStore Name' 
   />
  </form>
)
}

const renderAction = () => {
  const handleSubmit = (input) => {
    console.log(input)
  }
     return (
      <div>
       <Button onSubmit={handleSubmit}>Submit</Button>
      </div>
    )
    }

一开始showArrow的值是true，所以当我按下图标时它会更新图标，但我希望它在3秒后更新图标，同时在其他小部件（例如AssetImage）的同一位置显示加载的gif 。这样有可能吗？

在更新图标之前，我希望它在同一位置显示加载gif效果3秒钟。

Answer 1

第一个解决方案：最好是为窗口小部件提供状态管理。因此，首先您将显示IconButton（第一个图标），然后单击它可以将计时器设置为三秒钟，或者等待将来的值，然后用CircularProgressIndicator替换IconButton（第一个图标）。

计时器结束后，用IconButton（第二个图标）替换回CircularProgressIndicator

第二个解决方案：

  var showArrow = false;
  var showLoading = false;

  Widget myIconButton() {
if (!showLoading)
  return showArrow
      ? IconButton(
          icon: Icon(Icons.clear, color: Colors.white),
          onPressed: () {
            setState(() {
              showArrow = !showArrow;
              showLoading = !showLoading;
            });
            Future.delayed(Duration(seconds: 3), () {
              if (mounted)
                setState(() {
                  showLoading = !showLoading;
                });
            });
          })
      : IconButton(
          icon: Icon(Icons.arrow_right),
          onPressed: () {},
        );
else
  return SizedBox(
      width: 20, height: 20, child: CircularProgressIndicator());
  }

Answer 2

在按下时尝试以下操作：

setState(() {
       showArrow = false;
        // Anything else you want
});
Future.delayed(Duration(seconds: 3)).then((_) {
      setState(() {
       showArrow = true; //goes back to arrow Icon
        // Anything else you want
      });

在小部件本身中，诸如：

showArrow ? ArrowIcon() : LoadingIcon();

这样，一旦按下箭头，状态为假，3秒钟后再次为真

是否可以仅在抖动中显示小部件3秒

2 个答案: