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