14.7 过滤面板 - 打分评级

14.7 过滤面板 - 打分评级

img

实现步骤：

第 1 步：星级列表组件

lib/common/components/stars_list.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
66
67
68
69
70
import 'package:flutter/material.dart';

import '../index.dart';

/// 星级列表组件
class StarsListWidget extends StatelessWidget {
  /// 点击事件
  final Function(int value)? onTap;

  /// 图标 data
  final IconData? iconData;

  /// 星级数量
  final int starNum;

  /// 选中的星级
  final int value;

  /// 星级大小
  final double? size;

  // 颜色
  final Color? color;

  // 选中颜色
  final Color? selectedColor;

  // 元素间距
  final double? spacing;

  // 行间距
  final double? runSpacing;

  // 构造
  StarsListWidget({
    Key? key,
    this.onTap,
    this.size = 24,
    this.iconData,
    Color? color,
    Color? selectedColor,
    this.spacing = 5,
    this.runSpacing = 5,
    this.starNum = 5,
    this.value = 0,
  })  : color = color ?? AppColors.surfaceVariant,
        selectedColor = selectedColor ?? AppColors.primary,
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return <Widget>[
      for (var i = 1; i <= starNum; i++)
        IconWidget.icon(
          iconData ?? Icons.star,
          size: size ?? 12,
          color: i <= value ? selectedColor : color,
        ).onTap(() {
          if (value == 1 && i == value) {
            onTap?.call(0);
          } else {
            onTap?.call(i);
          }
        }),
    ].toWrap(
      spacing: spacing ?? AppSpace.listItem,
      runSpacing: runSpacing ?? AppSpace.listRow,
    );
  }
}

第 2 步：控制器

lib/pages/search/search_filter/controller.dart

1
2
// 星级
int starValue = -1;
1
2
3
4
5
// 星级选中
void onStarTap(int value) {
  starValue = value;
  update(["filter_stars"]);
}

第 3 步：FilterView 视图

lib/pages/search/search_filter/widgets/filter_view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 评级选择
Widget _buildStars() {
  return GetBuilder<SearchFilterController>(
    id: "filter_stars",
    builder: ( _) {
      return StarsListWidget(
        value: controller.starValue,
        onTap: controller.onStarTap,
        selectedColor: AppColors.highlight,
        size: 18,
      ).paddingBottom(AppSpace.listRow * 2);
    },
  );
}
1
2
3
4
5
6
Widget _buildView() {
  return <Widget>[
    ...
    // 评价
    _buildTitle(LocaleKeys.searchFilterReview.tr),
    _buildStars(),

提交代码到 git