美文网首页Flutter圈子FlutterFlutter中文社区
flutter 自定义带水波纹和点击态的cell

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

作者: TryEnough | 来源:发表于2019-04-22 16:19 被阅读20次

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

    相关文章

      网友评论

        本文标题:flutter 自定义带水波纹和点击态的cell

        本文链接:https://www.haomeiwen.com/subject/twxugqtx.html