如何在flutter中创建一个年龄范围滑块?

nhhxz33t  于 2023-02-13  发布在  Flutter
关注(0)|答案(6)|浏览(170)

有人知道如何在flutter中创建一个年龄范围滑块吗?一个有两个输入值的滑块。有点像Tinder必须选择最小和最大年龄。一个有两个输入字段的滑块

aiqt4smr

aiqt4smr1#

由于我的一个开发项目也需要这个小部件,所以我决定开发它。
结果如下

源代码可在GitHub上找到
关于this link的完整说明

kpbpu008

kpbpu0082#

您正在寻找的是Slider小部件。我认为离散滑块最适合您试图实现的目标。
您应该看看Flutter Gallery App,它有许多小部件的示例以及源代码,可以在GitHub repo上找到。
从他们的Slider Demo看他们的code,我发现这个例子可能适合你的需要:

new Slider(
                  value: _discreteValue,
                  min: 0.0,
                  max: 100.0,
                  divisions: 5,
                  label: '${_discreteValue.round()}',
                  onChanged: (double value) {
                    setState(() {
                      _discreteValue = value;
                    });
                  },
                ),
                const Text('Discrete'),
              ],
            )

当然,您将需要调整此代码以更好地满足您的需要,但希望它能让您朝着正确的方向开始。
如果您有任何问题,请告诉我!

31moq8wy

31moq8wy3#

感谢boeledi这是一个很好的library给你。

RangeSlider(
      min: minPrice,
      max: maxPrice,
      lowerValue: _lowerValue,
      upperValue: _upperValue,
      divisions: 50,
      showValueIndicator: true,
      valueIndicatorMaxDecimals: 4,
      onChanged: (double newLowerValue, double newUpperValue) {
        setState(() {
          _lowerValue = newLowerValue;
          _upperValue = newUpperValue;
        });
      },
      onChangeStart: (double startLowerValue, double startUpperValue) {
        print('Started with values: $startLowerValue and $startUpperValue');
      },
      onChangeEnd: (double newLowerValue, double newUpperValue) {
        print('Ended with values: $newLowerValue and $newUpperValue');
      },
    )

把它放在你的小工具树里。

min是最小值。max是所需的最大值。请给予lowerValueupperValue指定初始全局值,这样,当范围更改时,这些值也会更改。divisions = nlowerValueupperValue之间的金额除以n部分。您在onChanged方法中有了新值。祝您好运。

2w2cym1i

2w2cym1i4#

Flutter版本1.20.0

我们有一个标签的RangeSlider更新。

class RangeWidget extends StatefulWidget {
    @override
    State<StatefulWidget> createState() => _RangeWidget();
  }
  
  class _RangeWidget extends State<RangeWidget> {
    RangeValues _currentRangeValues = const RangeValues(0, 100);
  
    static String _valueToString(double value) {
      return value.toStringAsFixed(0);
    }
  
    @override
    Widget build(BuildContext context) {
      return new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          RangeSlider(
            values: _currentRangeValues,
            min: 0,
            max: 100,
            divisions: 10,
            labels: RangeLabels(
              _currentRangeValues.start.round().toString(),
              _currentRangeValues.end.round().toString(),
            ),
            onChanged: (RangeValues values) {
              setState(() {
                _currentRangeValues = values;
              });
            },
          )
        ],
      );
    }
  }

snz8szmq

snz8szmq5#

//你可以试试这个。

double minPrice = 0;
  double maxPrice = 100;
  double _lowerValue = 0;
  double _upperValue = 100;

.......

SliderTheme(
                        data: SliderTheme.of(context).copyWith(
                          activeTrackColor: kCustomRed,
                          inactiveTrackColor: Color(0xFFE6EAEE),
                          thumbColor: kCustomRed,
                          thumbShape:
                              RoundSliderThumbShape(enabledThumbRadius: 6),
                        ),
                        child: rg.RangeSlider(
                          min: minPrice,
                          max: maxPrice,
                          lowerValue: _lowerValue,
                          upperValue: _upperValue,
                          divisions: 50,
                          showValueIndicator: true,
                          onChanged:
                              (double newLowerValue, double newUpperValue) {
                            setState(() {
                              _lowerValue = newLowerValue;
                              _upperValue = newUpperValue;
                            });
                          },
                        ),
                      ),
syqv5f0l

syqv5f0l6#

(You也可以使用syncfusion_flutter_sliders封装)
以下是使用Flutter RangeSlider小部件创建年龄范围getter的示例:
输出:
第一节第一节第一节第一节第一次

  • 为较低年龄和较高年龄创建变量
int _lowerValue = 18;
int _upperValue = 69;
  • 现在创建实体:
  • 下面的代码针对Scaffoldbody属性 *
  • 使用values.start.round()获取整数(如果不使用,也包括双精度值。)年龄必须是整数 *
Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text("Lower value: $_lowerValue"),
        Text("Upper value: $_upperValue"),
        Container(
          height: 80,
          width: 300,
          child: RangeSlider(
            min: 18,
            max: 69,
            divisions: 51,
            values:
                RangeValues(_lowerValue.toDouble(), _upperValue.toDouble()),
            onChanged: (RangeValues values) {
              setState(() {
                _lowerValue = values.start.round();
                _upperValue = values.end.round();
              });
            },
          ),
        ),
      ],
    ),
  ),

相关问题