美文网首页
Flutter Text 封装

Flutter Text 封装

作者: Victory_886 | 来源:发表于2021-04-25 10:53 被阅读0次

    Flutter 开发中Text组件用到的也挺多的,不过基本都用Container来包一层来设置间距大小等约束,为此我也简单封装一份,请大家过目:

    相关代码如下:

    /// Text 封装
    class WLTextContainer extends StatelessWidget {
      final String text;
      final Color color;
      final double width;
      final double height;
      final Color bgColor;
      final int maxLines;
      final double fontSize;
      final TextAlign align;
      final Function onClickTxt;
      final StrutStyle strutStyle;
      final TextOverflow overflow;
      final Decoration decoration;
      final Alignment baseAlignment;
      final EdgeInsetsGeometry margin;
      final EdgeInsetsGeometry padding;
      final BoxConstraints constraints;
      final TextDirection textDirection;
      const WLTextContainer({
        Key key,
        this.text,
        this.width,
        this.height,
        this.margin,
        this.padding,
        this.onClickTxt,
        this.strutStyle,
        this.decoration,
        this.constraints,
        this.maxLines = 1,
        this.fontSize = 16,
        this.textDirection,
        this.color = Colors.white,
        this.align = TextAlign.start,
        this.bgColor = Colors.transparent,
        this.overflow = TextOverflow.ellipsis,
        this.baseAlignment = Alignment.center,
      }) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          width: width,
          height: height,
          margin: margin,
          color: bgColor,
          padding: padding,
          child: WLContainer(
            onClick: onClickTxt,
            decoration: decoration,
            alignment: baseAlignment,
            constraints: constraints,
            child: Text(
              text != null ? text.trimLeft().trimRight() : "",
              textAlign: align,
              overflow: overflow,
              maxLines: maxLines,
              strutStyle: strutStyle,
              textDirection: textDirection,
              // style: TextStyle(color: color, fontSize: scaleValue(fontSize)),
              style: TextStyle(color: color, fontSize: fontSize),
            ),
          ),
        );
      }
    }
    

    使用如下:

    WLTextContainer(
      width: 222,
      height: 60,
      fontSize: 20,
      text: "去同步",
      margin: insetT(15),
      onClickTxt: () {
        print('去同步');
      },
    );
    

    查看WLContainer传送门

    这样就不用Container 先包一层,然后再把ContainerInkWell 包上加点击事件了,一次性都包装好了,后期就方便使用了,代码层级也不那么深了。
    我觉得给我节省了一些不必要的写代码时间。
    大家觉得合适就拿过去使用吧,有什么不合适的可以留言,我可以升级调整优化,谢谢啦~~~

    相关文章

      网友评论

          本文标题:Flutter Text 封装

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