Ink 水波

使InkWell和InkResponse的水波纹有效 用于绘制图像或其他装饰的Material组件。

相关组件

InkResponse InkWell

Ink基本使用

   <br />【child】 : 子组件   【Widget】<br />【padding】 : 内边距   【EdgeInsetsGeometry】<br />【decoration】 : 装饰   【Decoration】<br />【width】 : 宽   【double】<br />【height】 : 高   【double】<br />【color】 : 颜色   【Color】<br />![156.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589459095427-574e5ab9-f40d-4094-b96a-5c8e83702eb9.gif#align=left&display=inline&height=244&margin=%5Bobject%20Object%5D&name=156.gif&originHeight=244&originWidth=792&size=151081&status=done&style=none&width=792)

import 'package:flutter/material.dart';
class CustomInk extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.orangeAccent,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Ink(
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
                color: Colors.yellow,
              borderRadius: BorderRadius.all(Radius.circular(20))
            ),

            width: 200.0,
            height: 100.0,
            child: InkWell(
                onTap: () {
                },
                child: Center(
                  child: Text('Hello'),
                )),
          ),
        ),
      ),
    );
  }
}

Ink.image图片水波纹

   <br />   其中属性与Image组件一致，详见Image组件<br />![154.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589459146547-2db54da8-65dd-4ece-95dd-195662007585.gif#align=left&display=inline&height=404&margin=%5Bobject%20Object%5D&name=154.gif&originHeight=404&originWidth=802&size=6794665&status=done&style=none&width=802)

import 'package:flutter/material.dart';
class InkImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.grey[800],
      child: Center(
        child: Ink.image(
          image: AssetImage('assets/images/sabar.jpg'),
          fit: BoxFit.cover,
          width: 300.0,
          height: 200.0,
          child: InkWell(
              onTap: () {},
              child: Align(
                alignment: Alignment.topLeft,
                child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Text('Chaos',
                      style: TextStyle(
                          fontWeight: FontWeight.w900, color: Colors.black)),
                ),
              )),
        ),
      ),
    );
  }
}