Flutter

封装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));
  }
效果
上一篇 下一篇

猜你喜欢

热点阅读