使用惯了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),
),
);
}
}
到此这篇关于Flutter完美封装Text的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持Devmax。