如果用户点击错误的 btn 或小部件，Flutter 中是不是有办法向用户显示点击位置？

Posted 2023-02-23

【中文标题】如果用户点击错误的 btn 或小部件，Flutter 中是不是有办法向用户显示点击位置？

【英文标题】：Is there a way in Flutter to show user where to click if he click on wrong btn or widget?如果用户点击错误的 btn 或小部件，Flutter 中是否有办法向用户显示点击位置？

【发布时间】：2020-01-11 16:01:52

【问题描述】：

如果用户点击了错误的东西，例如触摸涟漪效果或其他方式，我想向用户显示正确的按钮或其他要点击的地方...

我是 Flutter 的新手，我不知道是否可以引用小部件而不是对其产生一些影响...

暂时没有代码..

所以当用户单击“错误”按钮右键闪烁或某些动画信号右键时，我需要“效果”。 谢谢。

【参考方案1】：

使用 BottonTheme 和 animationController 单击此按钮时，您将使用另一个按钮的 AnimationController

代码 sn-p

ButtonTheme(
              minWidth: 88.0 *
                  _animation
                      .value, //multiply the static width value with current animation.value value
              height: 36.0 *
                  _animation
                      .value, //multiply the static height value with current animation.value value
              child: RaisedButton(
                child: Text('Tap this button to Animate Button on top'),
                onPressed: () 
                  _animationController1
                      .forward();
                ,
              ),
            )

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: AnimatingButton(),
    );
  


class AnimatingButton extends StatefulWidget 
  @override
  AnimatingButtonState createState() 
    return new AnimatingButtonState();
  


class AnimatingButtonState extends State<AnimatingButton>
    with TickerProviderStateMixin 
  //Uses a Ticker Mixin for Animations
  Animation<double> _animation;
  AnimationController _animationController;

  Animation<double> _animation1;
  AnimationController _animationController1;

  @override
  void initState() 
    super.initState();
    _animationController = AnimationController(
        vsync: this,
        duration: Duration(
            seconds:
                2)); //specify the duration for the animation & include `this` for the vsyc
    _animation = Tween<double>(begin: 1.0, end: 2.5).animate(
        _animationController); //use Tween animation here, to animate between the values of 1.0 & 2.5.

    _animation.addListener(() 
      //here, a listener that rebuilds our widget tree when animation.value chnages
      setState(() );
    );

    _animation.addStatusListener((status) 
      //AnimationStatus gives the current status of our animation, we want to go back to its previous state after completing its animation
      if (status == AnimationStatus.completed) 
        _animationController
            .reverse(); //reverse the animation back here if its completed
      
    );

    _animationController1 = AnimationController(
        vsync: this,
        duration: Duration(
            seconds:
                2)); //specify the duration for the animation & include `this` for the vsyc
    _animation1 = Tween<double>(begin: 1.0, end: 2.5).animate(
        _animationController1); //use Tween animation here, to animate between the values of 1.0 & 2.5.

    _animation1.addListener(() 
      //here, a listener that rebuilds our widget tree when animation.value chnages
      setState(() );
    );

    _animation1.addStatusListener((status) 
      //AnimationStatus gives the current status of our animation, we want to go back to its previous state after completing its animation
      if (status == AnimationStatus.completed) 
        _animationController1
            .reverse(); //reverse the animation back here if its completed
      
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Animating a Button'),
      ),
      body: Column(
        children: <Widget>[
          Center(
            child: ButtonTheme(
              minWidth: 88.0 *
                  _animation1
                      .value, //multiply the static width value with current animation.value value
              height: 36.0 *
                  _animation1
                      .value, //multiply the static height value with current animation.value value
              child: RaisedButton(
                child: Text('Tap this button to  Animate Button below '),
                onPressed: () 
                  _animationController
                      .forward(); // tapping the button, starts the animation.
                ,
              ),
            ),
          ),
          Center(
            child: ButtonTheme(
              minWidth: 88.0 *
                  _animation
                      .value, //multiply the static width value with current animation.value value
              height: 36.0 *
                  _animation
                      .value, //multiply the static height value with current animation.value value
              child: RaisedButton(
                child: Text('Tap this button to Animate Button on top'),
                onPressed: () 
                  _animationController1
                      .forward();
                ,
              ),
            ),
          ),
        ],
      ),
    );