Flutter中GridTile中图像上方的InkVell波纹

Flutter中GridTile中图像上方的InkVell波纹

我认为这是在图像上显示波纹效果的更好方法。

代码语言：txt复制

Ink.image(
    image: AssetImage('sample.jpg'),
    fit: BoxFit.cover,
    child: InkWell(
        onTap: () {},
    ),
),

使用Stack，我们可以将Material和InkWell带到图像上。要拉伸材质，我们将使用Positioned.fill小部件。

代码语言：txt复制

Stack(
  children: <Widget>[
    Image( ... ),
    Positioned.fill(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () { ... },
        ),
      ),
    ),
  ],
);

我们创建了这个简单的小部件，以在任何给定孩子的上方绘制墨水反应。

代码语言：txt复制

class InkWrapper extends StatelessWidget {
  final Color splashColor;
  final Widget child;
  final VoidCallback onTap;

  InkWrapper({
    this.splashColor,
    @required this.child,
    @required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        child,
        Positioned.fill(
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              splashColor: splashColor,
              onTap: onTap,
            ),
          ),
        ),
      ],
    );
  }
}

• 优秀的方法。即使在AspectRatio下也可以使用。如果可以使用FadeInImage会更好。

代码语言：txt复制

SizedBox(
  height: 200,
  child: Ink(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: ExactAssetImage("chocolate_image"),
        fit: BoxFit.cover,
      ),
    ),
    child: InkWell(
      onTap: () {},
      splashColor: Colors.brown.withOpacity(0.5),
    ),
  ),
)

代码语言：txt复制

Material(  
  child : InkWell(          
      child : YourWidget    
  )      
)

flutter dart

0 人点赞