12.9 Tab商品详情

12.9 Tab 商品详情

实现步骤：

第 1 步：商品详情子视图

lib/pages/goods/product_details/widgets/tab_detail.dart

1
2
3
4
// 标题
_buildTitle(String title) {
  return TextWidget.title3(title).paddingBottom(AppSpace.listRow);
}
1
2
3
4
5
6
7
8
// 内容
_buildContent(String? title) {
  return TextWidget.title2(
    title ?? "-",
    softWrap: true,
    maxLines: 10,
  ).paddingBottom(AppSpace.listRow * 2);
}
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
@override
Widget build(BuildContext context) {
  return <Widget>[
    // 说明
    _buildTitle("Description"),
    _buildContent(controller.product?.description?.clearHtml),

    // sku
    _buildTitle("SKU"),
    _buildContent(controller.product?.sku ?? "-"),

    // price
    _buildTitle("Price"),
    _buildContent(controller.product?.price ?? "-"),

    // 市场价
    _buildTitle("Regular price"),
    _buildContent(controller.product?.regularPrice ?? "-"),

    // 重量
    _buildTitle("Weight"),
    _buildContent(controller.product?.weight ?? "-"),

    // 尺寸
    _buildTitle("dimensions"),
    _buildContent(
        "${controller.product?.dimensions?.length} x ${controller.product?.dimensions?.width} x ${controller.product?.dimensions?.height}"),

    // end
  ]
      .toColumn(
        crossAxisAlignment: CrossAxisAlignment.start,
      )
      .scrollable()
      .paddingVertical(AppSpace.page);
}

fix：底部导航穿透问题

lib/common/widgets/navigation.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@override
Widget build(BuildContext context) {
  ...
    ws.add(
      <Widget>[
        ...
      ]
          .toColumn(
            mainAxisAlignment: MainAxisAlignment.center, // 居中
            mainAxisSize: MainAxisSize.max, // 撑满
          )
          .onTap(() => onTap(i))
          .expanded(),
    );
  }

mainAxisSize: MainAxisSize.max, // 撑满

mainAxisAlignment: MainAxisAlignment.center, // 居中

onTap 中已经是 behavior: behavior ?? HitTestBehavior.opaque, 防事件穿透

提交代码到 git