flutter：等待按钮卡的飞溅效果点击

Question

我有一个小部件按钮，当点击时，启动画面不会正确显示，因为它直接进入路线并且速度非常快，是否可以给点击动画一个时间然后按照路线走？

Card(
 margin: EdgeInsets.only(top: 20, left: 20, right: 20),
 child: InkWell(onTap: () => Navigator.of(context).pushNamed('/textvoice'),
 child: Text('hello')))

Answer 1

onTap: () async {
  await Future.delayed(Duration(milliseconds: 600));
  Navigator.of(context).pushNamed('/textvoice');
}

Answer 2

首先，为检查动画创建一个布尔变量。

bool isLoading = false;

然后你可以试试这个：

Card(
  margin: EdgeInsets.only(top: 20, left: 20, right: 20),
  child: InkWell(
  onTap: () async {
    setState(() => isLoading = true);
    await Future.delayed(Duration(seconds: 2));
    setState(() => isLoading = fasle);
    Navigator.of(context).pushNamed('/textvoice');
  },
  child: Center(
        child: isLoading ? CircularProgressIndicator() : Text('hello'),
    ),
  ),
);

如果你不确定是否理解这个，我会给你完整的Stateful Widget

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool isLoading = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: buildButton(context),
      ),
    );
  }

  Card buildButton(BuildContext context) {
    return Card(
      margin: EdgeInsets.only(top: 20, left: 20, right: 20),
      child: InkWell(
        onTap: () async {
          setState(() => isLoading = true);
          await Future.delayed(Duration(seconds: 2));
          setState(() => isLoading = true);
          Navigator.of(context).pushNamed('/textvoice');
        },
        child: Center(
          child: isLoading ? CircularProgressIndicator() : Text('hello'),
        ),
      ),
    );
  }
}

flutter：等待按钮卡的飞溅效果点击

flutter: wait for the splash-effect tap of a button card

flutter

button

time

splash-screen