9.7 推荐商品栏编写

9.7 推荐商品栏编写

实现步骤：

第 1 步：商品栏标题编写

这个可以复用所有抽取出来了
主要有 标题、次标题、更多点击事件 三块完成

img

lib/pages/goods/home/widgets/list_title.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
import 'package:flutter/material.dart';
import 'package:flutter_woo_commerce_getx_learn/common/index.dart';
import 'package:get/get.dart';

/// 列表标题
class BuildListTitle extends StatelessWidget {
  /// 标题
  final String title;

  /// 次标题
  final String? subTitle;

  /// 更多点击事件
  final Function()? onTap;

  const BuildListTitle(
      {Key? key, required this.title, this.subTitle, this.onTap})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return <Widget>[
      // 标题
      TextWidget.title1(
        title,
      ),

      // 子标题
      TextWidget.body2(
        subTitle ?? "",
        color: AppColors.primary,
      ).paddingLeft(AppSpace.listItem).expanded(),

      // ALL
      <Widget>[
        TextWidget.body1(
          LocaleKeys.gHomeMore.tr,
        ),
        IconWidget.icon(Icons.chevron_right),
      ]
          .toRow(
            mainAxisSize: MainAxisSize.min,
          )
          .onTap(onTap),
    ].toRow();
  }
}

第 2 步：推荐商品

这里是横向混动

img

lib/pages/goods/home/controller.dart

1
2
// ALL 点击事件
void onAllTap(bool featured) {}

lib/pages/goods/home/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
// 推荐商品
Widget _buildFlashSell() {
  return <Widget>[
    for (var i = 0; i < controller.flashShellProductList.length; i++)
      ProductItemWidget(
        controller.flashShellProductList[i],
        imgHeight: 117.w,
        imgWidth: 120.w,
      )
          .constrained(
            width: 120.w,
            height: 170.w,
          )
          .paddingRight(AppSpace.listItem)
  ]
      .toListView(
        scrollDirection: Axis.horizontal,
      )
      .height(170.w)
      .paddingBottom(AppSpace.listRow)
      .sliverToBoxAdapter()
      .sliverPaddingHorizontal(AppSpace.page);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 主视图
Widget _buildView() {
  ...
		// 推荐商品
      // 栏位标题
      controller.flashShellProductList.isNotEmpty
          ? BuildListTitle(
              title: LocaleKeys.gHomeFlashSell.tr,
              subTitle: "03. 30. 30",
              onTap: () => controller.onAllTap(true),
            ).sliverToBoxAdapter().sliverPaddingHorizontal(AppSpace.page)
          : const SliverToBoxAdapter(),

      // 列表
      _buildFlashSell(),

提交代码到 git