flutter 自定义带水波纹和点击态的cell
2019-04-22 本文已影响20人
TryEnough
请支持原文:http://tryenough.com/flutter-custom-cell
看效果
代码:
请支持原文:http://tryenough.com/flutter-custom-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)),
],
),
),
)
),
);
}
}
请支持原文:http://tryenough.com/flutter-custom-cell
使用的地方
_CListTile(
text: "test title",
leadingIconPath: "images/test.png",
leadingHighLightIconPath: "images/test1.png",
onTab: () {
print("test");
}),