12.4 商品标题栏

12.4 商品标题栏

image-20220722153753484

实现步骤:


第 1 步:图标文字组件 编写

lib/common/widgets/icon_text.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import 'package:flutter/material.dart';
import '../index.dart';

/// 图标文字组件
class IconTextWidget extends StatelessWidget {
// 图标
final Widget? icon;

// 文字
final String? text;

// 图标数据
final IconData? iconData;

// 图标尺寸
final double? iconSize;

// 文字尺寸
final double? fontSize;

// 颜色
final Color? color;

// 间距
final double? iconPadding;

// 构造函数
const IconTextWidget({
Key? key,
this.icon,
this.text,
this.iconData,
this.iconSize,
this.color,
this.fontSize,
this.iconPadding,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return <Widget>[
// 图标
icon?.paddingRight(iconPadding ?? AppSpace.iconTextSmail) ??
IconWidget.icon(
iconData ?? Icons.star,
size: iconSize ?? 12,
color: color ?? AppColors.primary,
).paddingRight(iconPadding ?? AppSpace.iconTextSmail),

// 文字
TextWidget.body2(
text ?? '',
size: fontSize ?? 12,
),
]
.toRow(
mainAxisSize: MainAxisSize.min,
)
.fittedBox(
fit: BoxFit.none,
clipBehavior: Clip.hardEdge,
);
}
}

第 2 步:视图

lib/pages/goods/product_details/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 商品标题
Widget _buildTitle() {
return <Widget>[
// 金额、打分、喜欢
<Widget>[
// 金额
TextWidget.title1(
"\$${controller.product?.price ?? 0}",
).expanded(),
// 打分
const IconTextWidget(
iconData: Icons.star,
text: "4.5",
).paddingRight(AppSpace.iconTextMedium),
// 喜欢
const IconTextWidget(
iconData: Icons.favorite,
text: "100+",
),
].toRow(),

// 次标题
TextWidget.body1(
controller.product?.shortDescription?.clearHtml ?? "-",
),
]
.toColumn(
// 左对齐
crossAxisAlignment: CrossAxisAlignment.start,
// 垂直间距
mainAxisAlignment: MainAxisAlignment.spaceBetween,
)
.paddingAll(AppSpace.page);
}

提交代码到 git