美文网首页Flutter
封装flutter标签控件

封装flutter标签控件

作者: HawkFlying | 来源:发表于2020-04-27 17:26 被阅读0次

    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));
      }
    
    效果

    相关文章

      网友评论

        本文标题:封装flutter标签控件

        本文链接:https://www.haomeiwen.com/subject/khduwhtx.html