flutter 自定义带水波纹和点击态的cell

看效果

代码：

class _CListTile extends StatefulWidget {
  _CListTile(
      {Key key,
      this.text,
      this.textColor: Colors.black,
      this.textHighLightColor: const Color(0xff25C78A),
      this.leadingIconPath,
      this.leadingHighLightIconPath,
      @required this.onTab})
      : super(key: key);

  final Function onTab;
  final String text;
  final Color textColor;
  final Color textHighLightColor;
  final String leadingIconPath;
  final String leadingHighLightIconPath;

  _CListTileState createState() => _CListTileState();
}

class _CListTileState extends State<_CListTile> {
  bool _highlight = false;

  void _handleTapDown(TapDownDetails details) {
    setState(() {
      _highlight = true;
    });
  }

  void _handleTapUp(TapUpDetails details) {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTapCancel() {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTap() {
    widget.onTab();
  }

  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: _handleTapDown,
      onTapUp: _handleTapUp,
      onTap: _handleTap,
      onTapCancel: _handleTapCancel,
      child: Container(
        height: 52,
        child: Material(
          child: InkWell(
            onTap: (){
              if(widget.onTab != null) {
                widget.onTab();
              }
            },
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Padding(padding: EdgeInsets.only(left: 16)),
                _highlight
                    ? Image.asset(widget.leadingHighLightIconPath, width: 25)
                    : Image.asset(widget.leadingIconPath, width: 25),
                Padding(padding: EdgeInsets.only(left: 15)),
                Text(widget.text,
                    style: TextStyle(
                        fontSize: 16.0,
                        fontWeight: FontWeight.w600,
                        color: _highlight
                            ? widget.textHighLightColor
                            : widget.textColor)),
              ],
            ),
          ),
        )
      ),
    );
  }
}

使用的地方

_CListTile(
            text: "test title",
            leadingIconPath: "images/test.png",
            leadingHighLightIconPath: "images/test1.png",
            onTab: () {
              print("test");
            }),

热度: 16