【Flutter】四十、Flutter水波紋組件——InkWell

Flutter中的水波紋組件——InkWell,可以作用在ContainerImage等各種組件,不僅僅是按鈕。

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上的,如果將顏色定義在InkWellchild中,當點擊時,水波紋會被顏色所覆蓋。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章