Flutter教程：打造Airbnb式价格区间筛选器 - 第一部分

2023-11-04 14:59:23

前言：

欢迎来到Flutter教程系列的第一部分，我们将创建一个价格区间筛选器，类似于Airbnb应用程序中的筛选器。该组件将使您能够以交互方式选择价格范围，以便在应用程序中过滤数据。

1. 概览：

我们将把这个价格区间筛选器分成两部分：图表部分和底部滑块部分。图表部分将显示价格范围，而滑块部分将允许用户选择价格范围。

2. 创建图表部分：

首先，我们需要创建一个图表部分来显示价格范围。为此，我们将使用Flutter的CustomPainter类来绘制图表。

class PriceRangeChart extends CustomPainter {
  final double minPrice;
  final double maxPrice;
  final double selectedMinPrice;
  final double selectedMaxPrice;

  PriceRangeChart({
    required this.minPrice,
    required this.maxPrice,
    required this.selectedMinPrice,
    required this.selectedMaxPrice,
  });

  @override
  void paint(Canvas canvas, Size size) {
    // ...绘制代码
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

在上面的代码中，我们定义了一个PriceRangeChart类，继承自CustomPainter类。该类将绘制我们的价格范围图表。在构造函数中，我们接受最小价格、最大价格、选定的最小价格和选定的最大价格作为参数。

在paint()方法中，我们使用Canvas对象来绘制图表。在shouldRepaint()方法中，我们返回true，以便在价格范围发生变化时重新绘制图表。

3. 创建底部滑块部分：

接下来，我们需要创建一个底部滑块部分来允许用户选择价格范围。为此，我们将使用Flutter的RangeSlider类。

class PriceRangeSlider extends StatelessWidget {
  final double minPrice;
  final double maxPrice;
  final double selectedMinPrice;
  final double selectedMaxPrice;
  final Function(double, double) onRangeChanged;

  const PriceRangeSlider({
    required this.minPrice,
    required this.maxPrice,
    required this.selectedMinPrice,
    required this.selectedMaxPrice,
    required this.onRangeChanged,
  });

  @override
  Widget build(BuildContext context) {
    return RangeSlider(
      values: RangeValues(selectedMinPrice, selectedMaxPrice),
      min: minPrice,
      max: maxPrice,
      divisions: 10,
      labels: RangeLabels(
        selectedMinPrice.toString(),
        selectedMaxPrice.toString(),
      ),
      onChanged: (RangeValues values) {
        onRangeChanged(values.start, values.end);
      },
    );
  }
}

在上面的代码中，我们定义了一个PriceRangeSlider类，继承自StatelessWidget类。该类将创建我们的价格范围滑块。在构造函数中，我们接受最小价格、最大价格、选定的最小价格、选定的最大价格和一个在价格范围发生变化时调用的回调函数作为参数。

在build()方法中，我们使用RangeSlider小部件来创建我们的价格范围滑块。我们设置values属性以指定选定的最小价格和最大价格。我们还设置min属性和max属性以指定最小价格和最大价格。我们设置divisions属性以指定滑块上的刻度数。我们设置labels属性以指定滑块上的标签。最后，我们设置onChanged属性以指定在价格范围发生变化时调用的回调函数。

4. 使用图表和滑块部分：

现在我们可以使用图表和滑块部分来创建我们的价格区间筛选器。为此，我们将创建一个名为PriceRangeFilter的类。

class PriceRangeFilter extends StatefulWidget {
  final double minPrice;
  final double maxPrice;
  final double selectedMinPrice;
  final double selectedMaxPrice;
  final Function(double, double) onRangeChanged;

  const PriceRangeFilter({
    required this.minPrice,
    required this.maxPrice,
    required this.selectedMinPrice,
    required this.selectedMaxPrice,
    required this.onRangeChanged,
  });

  @override
  _PriceRangeFilterState createState() => _PriceRangeFilterState();
}

class _PriceRangeFilterState extends State<PriceRangeFilter> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        PriceRangeChart(
          minPrice: widget.minPrice,
          maxPrice: widget.maxPrice,
          selectedMinPrice: widget.selectedMinPrice,
          selectedMaxPrice: widget.selectedMaxPrice,
        ),
        PriceRangeSlider(
          minPrice: widget.minPrice,
          maxPrice: widget.maxPrice,
          selectedMinPrice: widget.selectedMinPrice,
          selectedMaxPrice: widget.selectedMaxPrice,
          onRangeChanged: widget.onRangeChanged,
        ),
      ],
    );
  }
}