14.4 过滤面板 - 价格区间

14.4 过滤面板 - 价格区间

img

实现步骤：

第 1 步：安装插件 another_xlider

pubspec.yaml

1
2
dependencies:
	another_xlider: 1.0.1+2

指定 1.0.1+2 版本

第 2 步：PriceRangeWidget 组件编写

lib/common/components/price_range.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import 'package:another_xlider/another_xlider.dart';
import 'package:flutter/material.dart';

import '../index.dart';

/// 价格区间组件
class PriceRangeWidget extends StatelessWidget {
  /// 当前值
  final List<double>? values; // [0, 0]

  /// 拖动事件
  final Function(int, dynamic, dynamic)? onDragging;

  /// 最大值
  final double? max;

  /// 最小值
  final double? min;

  const PriceRangeWidget({
    Key? key,
    this.values,
    this.onDragging,
    this.max = 99999,
    this.min = 0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            TextWidget.body3("\$${values?[0]}"),
            const Spacer(),
            TextWidget.body3("\$${values?[1]}"),
          ],
        ),
        // Slider 控件
        FlutterSlider(
          // 默认值
          values: values!,
          // 区间
          rangeSlider: true,
          // 最大
          max: max,
          // 最小
          min: min,
          // 滑块高
          handlerHeight: 6,
          // 宽
          handlerWidth: 6,
          // 滑块颜色
          trackBar: FlutterSliderTrackBar(
            activeTrackBar: BoxDecoration(
              color: AppColors.highlight,
            ),
            inactiveTrackBar: BoxDecoration(
              color: AppColors.outline,
            ),
          ),
          // 提示
          tooltip: FlutterSliderTooltip(
            leftPrefix: IconWidget.icon(
              Icons.attach_money,
            ),
            rightSuffix: IconWidget.icon(
              Icons.attach_money,
            ),
          ),
          // 左侧滑块
          handler: FlutterSliderHandler(
            decoration: const BoxDecoration(),
            child: Container(
              width: 6,
              height: 6,
              decoration: BoxDecoration(
                color: AppColors.highlight,
                borderRadius: const BorderRadius.all(
                  Radius.circular(3),
                ),
                border: Border.all(
                  color: AppColors.highlight,
                  width: 1,
                ),
              ),
            ),
          ),
          // 右侧滑块
          rightHandler: FlutterSliderHandler(
            child: Container(
              width: 6,
              height: 6,
              decoration: BoxDecoration(
                color: AppColors.highlight,
                borderRadius: const BorderRadius.all(
                  Radius.circular(3),
                ),
                border: Border.all(
                  color: AppColors.highlight,
                  width: 1,
                ),
              ),
            ),
          ),
          // 滑块拖动
          onDragging: onDragging,
        ),
      ],
    );
  }
}

第 3 步：控制器

lib/pages/search/search_filter/controller.dart

1
2
// 价格范围 0~1000
final List<double> priceRange = [100, 1000];
1
2
3
4
5
6
7
8
9
10
// 价格区间拖动
onPriceRangeDragging(
  int handlerIndex,
  dynamic lowerValue,
  dynamic upperValue,
) {
  priceRange[0] = lowerValue as double;
  priceRange[1] = upperValue as double;
  update(["filter_price_range"]);
}

第 4 步：FilterView 组件视图

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

1
2
3
4
// 标题栏
Widget _buildTitle(String title) {
  return TextWidget.body2(title).paddingBottom(AppSpace.listRow);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 价格选择区间
Widget _buildPriceRange() {
  return GetBuilder<SearchFilterController>(
    id: "filter_price_range",
    builder: (_) {
      return PriceRangeWidget(
        max: 5000,
        min: 0,
        values: controller.priceRange,
        onDragging: controller.onPriceRangeDragging,
      ).paddingBottom(AppSpace.listRow * 2);
    },
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Widget _buildView() {
  return <Widget>[
    // 顶部
    _buildTopBar(),

    // 价格
    _buildTitle(LocaleKeys.searchFilterPrice.tr),
    _buildPriceRange(),
  ]
      .toColumn(
        crossAxisAlignment: CrossAxisAlignment.start,
      )
      .paddingHorizontal(AppSpace.page);
}

提交代码到 git