Flutter Text 封装

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 封装)