Flutter 电商商品名称标签和文字混排效果实现

小咪咪 2023-09-29 10:07 9阅读 0赞

#### 一、在商品列表布局中经常会在标题前增加一个标签，如下样式： ####

#### ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pWy5Luj56CB55qE5bCP5by6_size_18_color_FFFFFF_t_70_g_se_x_16][] ####

封装了一个类代码如下：

import 'package:amway_superapp_ecommerce/res/colors.dart';
    import 'package:amway_superapp_ecommerce/util/ec_screen_util.dart';
    import 'package:flutter/material.dart';
    
    /*
     * @author 小强
     *
     * @time 2022/4/13  19:22
     *
     * @desc 标签加标题
     *
     */
    
    class LabelTitleWidget extends StatelessWidget {
      ///标签文字
      final String labelText;
    
      ///标签样式
      final TextStyle labelTextStyle;
    
      ///标题文字
      final String titleText;
    
      ///标题样式
      final TextStyle titleTextStyle;
    
      ///最大行数
      final int maxLines;
    
      ///间距宽度
      final num widthMargin;
    
      LabelTitleWidget(
          {this.labelText, this.labelTextStyle, this.titleText, this.titleTextStyle, this.maxLines, this.widthMargin});
    
      @override
      Widget build(BuildContext context) {
        return Container(
          child: RichText(
            maxLines: maxLines ?? 2,
            overflow: TextOverflow.ellipsis,
            text: TextSpan(
              children: [
                //标签
                WidgetSpan(
                    child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 5.w),
                  child: Text(labelText ?? "专题", style: labelTextStyle ?? TextStyle(fontSize: 12.sp, color: Colors.white)),
                  decoration: BoxDecoration(color: ColorsRes.color_f59356, borderRadius: BorderRadius.circular(3.w)),
                )),
    
                //间距
                WidgetSpan(child: SizedBox(width: widthMargin??4.w)),
    
                //标题
                TextSpan(
                  text: titleText ?? "",
                  style: titleTextStyle ?? TextStyle(fontSize: 12, color: Colors.black),
                ),
              ],
            ),
          ),
        );
      }
    }

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pWy5Luj56CB55qE5bCP5by6_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/98d4b9a68d564cedbc3503db248ee8c5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pWy5Luj56CB55qE5bCP5by6,size_18,color_FFFFFF,t_70,g_se,x_16