使用惯了Android的布局,对Flutter的组件和布局简直深恶痛绝啊,于是下定决心,一点一点封装Flutter的基础组件,今天封装的是Text组件,自认为封装的非常完美,完全可以
使用惯了Android的布局,对Flutter的组件和布局简直深恶痛绝啊,于是下定决心,一点一点封装Flutter的基础组件,今天封装的是Text组件,自认为封装的非常完美,完全可以用android布局的写法来写Text了,而且可以直接设置margin,padding,color,font,等等所有的属性,只需要一行代码就能实现,废话不多说,先看效果
我们可以看到,颜色,边框,圆角通通都设置完成了,还有其他的属性,就不都一一展示了,实现这个效果需要哪些代码呢?看下面
TextView(
"自定义textview自定义textview自定义textview自定义textview自定义textview",
backgroundColor: Colors.red,
textColor: Colors.white,
padding: 10,
cornerRadius: 10,
borderColor: Colors.yellow,
borderWidth: 1,
marginTop: 5,
singleLine: false,
)
是的,跟android布局的方法完全一样,再也不用嵌套container再也不要写什么style了!!!
具体的封装实体类如下,为了纪念android,我叫他TextView,具体属性参考代码里面,应该都很简单易懂吧
import 'package:flutter/material.dart';
class TextView extends StatelessWidget {
double? padding = 0;
double? margin = 0;
double? paddingLeft = 0;
double? paddingRight = 0;
double? paddingTop = 0;
double? paddingBottom = 0;
double? marginLeft = 0;
double? marginRight = 0;
double? marginTop = 0;
double? marginBottom = 0;
double? fontSize = 0;
Color? textColor = Colors.black;
Color? backgroundColor = Colors.white;
AlignmentGeometry? alignment = Alignment.center;
double? cornerRadius = 0;
double? borderWidth = 0;
Color? borderColor = Colors.white;
String content = "";
bool? singleLine = false;
bool? isBold = false;
TextView(this.content,
{this.textColor,
this.backgroundColor,
this.padding,
this.paddingTop,
this.paddingBottom,
this.paddingRight,
this.paddingLeft,
this.cornerRadius,
this.borderColor,
this.borderWidth,
this.marginBottom,
this.marginLeft,
this.marginRight,
this.marginTop,
this.margin,
this.fontSize,
this.singleLine,
this.isBold}) {
if (padding != null) {
if (padding != null && padding! > 0) {
paddingLeft = padding;
paddingRight = padding;
paddingBottom = padding;
paddingTop = padding;
}
}
if (margin != null) {
if (margin != null && margin! > 0) {
marginLeft = margin;
marginTop = margin;
marginRight = margin;
marginBottom = margin;
}
}
}
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.fromLTRB(this.marginLeft ?? 0, this.marginTop ?? 0,
this.marginRight ?? 0, this.marginBottom ?? 0),
decoration: new BoxDecoration(
border: new Border.all(
width: this.borderWidth ?? 0,
color: this.borderColor ?? Colors.white),
color: this.backgroundColor,
borderRadius:
new BorderRadius.all(new Radius.circular(this.cornerRadius ?? 0)),
),
padding: EdgeInsets.fromLTRB(this.paddingLeft ?? 0, this.paddingTop ?? 0,
this.paddingRight ?? 0, this.paddingBottom ?? 0),
child: Text(
content,
style: TextStyle(
color: this.textColor,
fontSize: this.fontSize ?? 14,
fontWeight:
this.isBold ?? false ? FontWeight.bold : FontWeight.nORMal,
overflow: this.singleLine ?? false
? TextOverflow.ellipsis
: TextOverflow.clip),
),
);
}
}
--结束END--
本文标题: Flutter实现Text完美封装
本文链接: https://lsjlt.com/news/158544.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-21
2023-10-28
2023-10-28
2023-10-27
2023-10-27
2023-10-27
2023-10-27
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0