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

最新推荐文章于 2024-08-17 12:54:57 发布

上课小蜗牛

最新推荐文章于 2024-08-17 12:54:57 发布

阅读量1k

点赞数

分类专栏： iOS 移动端 Android flutter 文章标签：点击态水波纹

本文链接：https://blog.csdn.net/u010758352/article/details/89454416

版权

Android 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

iOS

21 篇文章 0 订阅

订阅专栏

移动端

20 篇文章 0 订阅

订阅专栏

本文展示了如何在Flutter中创建一个带有水波纹效果和点击态反馈的自定义单元格。文章提供了实现效果的代码示例，并说明了在项目中的具体使用场景。

摘要由CSDN通过智能技术生成

请支持原文：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");
            }),