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

栏目: Android · 发布时间: 6年前

看效果

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

近似算法

近似算法

瓦齐拉尼 / 2010-9 / 49.00元

《近似算法》系统总结了到本世纪初为止近似算法领域的成果,重点关注近似算法的设计与分析,介绍了这个领域中最重要的问题以及所使用的基本方法和思想。全书分为三部分:第一部分使用不同的算法设计技巧给出了下述优化问题的组合近似算法:集合覆盖、施泰纳树和旅行商、多向割和k-割、k-中心、反馈顶点集、最短超字符串、背包、装箱问题、最小时间跨度排序、欧几里得旅行商等。第二部分介绍基于线性规划的近似算法。第三部分包......一起来看看 《近似算法》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试