看效果
代码:
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
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Item点击水波纹效果
- 使用CSS实现逼真的水波纹点击效果
- 手撕一个让人 “欲罢不能” 的水波纹选中控件
- pc-pcm-wave 一个简单录音波纹 Preact 组件
- Android 自定义 View (04自定义属性)
- Vue自定义组件(简单实现一个自定义组件)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。