一、在商品列表布局中经常会在标题前增加一个标签,如下样式:
封装了一个类代码如下:
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),
),
],
),
),
);
}
}