Flutter EC商品名ラベルとテキストミキシング効果の実現

1. 製品リストのレイアウトでは、次のようにタイトルの前にラベルが追加されることがよくあります。

クラスコードは次のようにカプセル化されます。

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