封装flutter标签控件
2020-04-27 本文已影响0人
HawkFlying
1、标签控件封装:
///标签控件
/// [text]标签内容
/// [textStyle]字体样式
/// [bgColor]背景颜色
/// [padding]内边距,建议通过[padding]来控制标签宽高大小,通过设定死 [width]、[height]可能会有适配问题
/// [width]标签宽
/// [height]标签高
/// [margin]外边距
Widget mTagView(
{@required String text,
@required TextStyle textStyle,
@required Color bgColor,
@required EdgeInsetsGeometry padding,
Key key,
double width,
double height,
EdgeInsetsGeometry margin}) {
return Container(
key: key,
padding: padding,
margin: margin,
width: width,
height: height,
decoration: BoxDecoration(
color: bgColor,
borderRadius: BorderRadius.horizontal(
left: Radius.circular(200), right: Radius.circular(200)),
),
alignment: Alignment.center,
child: Text(text, textAlign: TextAlign.center, style: textStyle),
);
}
2、标签控件使用:
_itemTagView(
text: '高级认证',
textStyle:
TextStyle(fontSize: 12, color: Color(0xff1AAD19)),
bgColor: Color(0x2629C542),
),
SizedBox(
width: 8,
),
_itemTagView(
text: 'VIP5',
textStyle:
TextStyle(fontSize: 12, color: Color(0xffFB7918)),
bgColor: Color(0x26F6CC1A),
)
Widget _itemTagView({
@required String text,
@required TextStyle textStyle,
@required Color bgColor,
}) {
return mTagView(
text: text,
textStyle: textStyle,
bgColor: bgColor,
padding: EdgeInsets.only(left: 8, right: 8, top: 2, bottom: 2));
}
![](https://img.haomeiwen.com/i17626152/74a79d8d47df0ffa.png)