【Flutter】四十、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),),
                )
              ),
            )
          ],
        ),
      ),
    );
  }
}

    點擊上方的圖片及紅色部件都會有水波紋的產生，注意這裏的顏色是定義在Ink上的，如果將顏色定義在InkWell的child中，當點擊時，水波紋會被顏色所覆蓋。