9.5 分类栏编写

9.5 分类栏编写

这是一个横向混动

img

实现步骤：

第 1 步：分类列表项编写

lib/common/components/category_item.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
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../index.dart';

/// 分类导航项
class CategoryListItemWidget extends StatelessWidget {
  /// 分类数据
  final CategoryModel category;

  /// 选中代码
  final int? selectId;

  /// tap 事件
  final Function(int categoryId)? onTap;

  const CategoryListItemWidget({
    Key? key,
    required this.category,
    this.onTap,
    this.selectId,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return <Widget>[
      // 图
      ImageWidget.url(
        category.image?.src ?? "", // 图片地址
        width: 52.w,
        height: 52.w,
      ),
      // 文字
      TextWidget.body1(
        category.name ?? "-", // 文字内容
        size: 18.sp,
        color: selectId == category.id ? AppColors.onSecondary : null, // 选中颜色
      ),
    ]
        .toColumn(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        )

        // padding 垂直间距
        .paddingVertical(AppSpace.button)

        // 背景色
        .backgroundColor(
          selectId == category.id
              ? AppColors.onSurfaceVariant
              : Colors.transparent,
        )
        .onTap(() => onTap?.call(category.id!));
  }
}

第 2 步：视图

lib/pages/goods/home/controller.dart

1
2
// 分类点击事件
void onCategoryTap(int categoryId) {}

lib/pages/goods/home/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 分类导航
Widget _buildCategories() {
  return <Widget>[
    for (var i = 0; i < controller.categoryItems.length; i++)
      CategoryListItemWidget(
        category: controller.categoryItems[i],
        onTap: (categoryId) => controller.onCategoryTap(categoryId),
      ).paddingRight(AppSpace.listItem)
  ]
      .toListView(
        scrollDirection: Axis.horizontal,
      )
      .height(90.w)
      .paddingVertical(AppSpace.listRow)
      .sliverToBoxAdapter()
      .sliverPaddingHorizontal(AppSpace.page);
}

提交代码到 git