flutter - 点击事件(二) - 给图片增加点击UI效果

最新推荐文章于 2024-09-19 10:42:46 发布

做人要简单

最新推荐文章于 2024-09-19 10:42:46 发布

阅读量1.9w

点赞数 1

分类专栏： Android ios flutter 文章标签： flutter image 点击 ui

本文链接：https://blog.csdn.net/qq_28478281/article/details/84065909

版权

本文介绍了在Flutter中为图片添加点击效果的方法，通过InkWell配合Container的前景色变化和AnimatedContainer的颜色过渡，实现点击视觉反馈。同时，针对点击过快导致的视觉缺失问题，提出使用动画来解决，确保点击效果的明显性。

摘要由CSDN通过智能技术生成

上一篇, 介绍了如何便利的构造一个自己的点击控件

flutter 中如果给图片外面套 InkWell ,你会发现点击的逻辑生效了,但是 UI 上没反应

备注: 图片来源, 违反版权请联系我,删除

gif

代码如下

import 'package:flutter/material.dart';

class ImageTapWidget extends StatefulWidget {
   
  final Widget child;
  final Function onTap;

  const ImageTapWidget({
   Key key, this.child, this.onTap}) : super(key: key);

  @override
  ImageTapWidgetState createState() {
   
    return new ImageTapWidgetState();
  }
}

class ImageTapWidgetState extends State<ImageTapWidget> {
   
  var isDown = false;
  @override
  Widget build(BuildContext context) {
   
    return GestureDetector(
      child: AnimatedContainer(
        duration: Duration(milliseconds: 500),
        foreground