【Flutter】四十、Flutter水波纹组件——InkWell_flutter inkwell

Flutter中的水波纹组件——InkWell，可以作用在Container、Image等各种组件，不仅仅是按钮。

import 'package:flutter/material.dart';

class InkWellRoute extends StatefulWidget{
  @override
  _InkWellRouteState createState() {
    // TODO: implement createState
    return _InkWellRouteState();
  }
}

class _InkWellRouteState extends State<InkWellRoute>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('InkWell'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Ink(
              height: 300,
              width: 300,
              color: Colors.red,
              child: InkWell(
                splashColor: Colors.greenAccent,
                onTap: (){},
                child: Center(
                  child: Text('点击我出现水波纹', style: TextStyle(color: Colors.white, fontSize: 25.0),),
                )
              ),
            ),
            SizedBox(height: 30,),
            Ink.image(
              image: AssetImage('assets/images/lake.jpg'),
              height: 250,
              width: 400,
              fit: BoxFit.cover,
              child: InkWell(
                splashColor: Colors.greenAccent,
                onTap: (){},
                child: Center(
                  child: Text('点击我出现水波纹', style: TextStyle(color: Colors.white, fontSize: 25.0),),
                )
              ),
            )
          ],
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

    点击上方的图片及红色部件都会有水波纹的产生，注意这里的颜色是定义在Ink上的，如果将颜色定义在InkWell的child中，当点击时，水波纹会被颜色所覆盖。