时间戳

首页 > 解决方案 > Flutter：当 InkWell() 的子元素是容器时如何修复 Tap 效果

flutter - Flutter：当 InkWell() 的子元素是容器时如何修复 Tap 效果

问题描述

我试图在它的孩子是容器时触发 InkWell 水龙头效果，但它不起作用。所以显然问题是如何在点击 InkWell 时显示一些水龙头效果。这是代码：

InkWell(
            onTap: () {},
            child: Container(
              decoration: BoxDecoration(
                color: isAvailable!
                    ? Color.fromRGBO(0, 118, 0, 1)
                    : Color.fromRGBO(114, 114, 114, 1),
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(15),
                  bottomRight: Radius.circular(15),
                ),
              ),
              width: (MediaQuery
                  .of(context)
                  .size
                  .width - 60) / 2,
              height: 50,
              child: Center(
                child: Text(
                  'Request',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                  ),
                ),
              ),
            ),
          )

标签： flutter

解决方案

当您点击时会出现墨迹动画，但由于它位于容器后面，所以它没有显示，所以我通过删除容器对您的代码进行了一些修改，并引入了 Ink 小部件

解决方案 1：

InkWell(
      onTap: () {},
      child: Ink(
        
        width: (MediaQuery.of(context).size.width - 60) / 2,
        height: 50,
        decoration: BoxDecoration(
          color: isAvailable
              ? Color.fromRGBO(0, 118, 0, 1)
              : Color.fromRGBO(114, 114, 114, 1),
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(15),
            bottomRight: Radius.circular(15),
          ),
        ),
        child: Center(
          child: Text(
            'Request',
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontSize: 16,
            ),
          ),
        ),
      ),
    );

解决方案 2：通过重新排序小部件

Container(
        decoration: BoxDecoration(
          color: isAvailable
              ? Color.fromRGBO(0, 118, 0, 1)
              : Color.fromRGBO(114, 114, 114, 1),
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(15),
            bottomRight: Radius.circular(15),
          ),
        ),
        width: (MediaQuery.of(context).size.width - 60) / 2,
        height: 50,
        child: Material(
          child: InkWell(
            onTap: () {},
            child: Center(
              child: Text(
                'Request',
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                ),
              ),
            ),
          ),
          color: Colors.transparent,
        ),
      ),

推荐阅读