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