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

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

封装了一个类代码如下：

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),
            ),
          ],
        ),
      ),
    );
  }
}