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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Flutter是Google开发的一套全新的跨平台、开源UI框架(本质上就是sdk)。 支持iOS、Android...
    HarveyLegend阅读 8,608评论 1 42
  • 接触 Flutter 已经有一阵子了,期间记录了很多开发小问题,苦于忙碌没时间整理,最近项目进度步上正轨,借此机会...
    水月沐風阅读 1,887评论 4 12
  • 学习Flutter也有一阵子了。闲着没事,用了公司一个已经凉凉的App设计图来练手。当然了接口不可能用的了,所以都...
    唯鹿_weilu阅读 3,202评论 1 18
  • View篇 有几种视图框架 总体来说有两种,Column和Row,前者表示竖直方向,后者表示水平方向。 怎么实现类...
    cg1991阅读 408评论 0 0
  • 背景 由于需要,最近需要在Flutter中应用股票走势线,寻找了很久Flutter相关第三方库,无果,没有一个是能...
    Cosecant阅读 2,306评论 4 12

友情链接更多精彩内容