dart - 如何将数字放在 Flutter Slider 的顶部

Question

我需要制作一个 slider ，该 slider 可以完美运行，它有自己的分区，但我需要做的是在每个分区中设置数字，我的意思是，如果 slider 有 3 个分区，则设置数字 1， 2、3，某种东西:

   1   2   3
---|---|---|---

有没有办法做到这一点？

我使用的代码是这个:

Slider(
  value: _place.value,
  min: 0.0,
  max: 10.0,
  divisions: 10,
  onChangeStart: (double value) {
    print('Start value is ' + value.toString());
  },
  onChangeEnd: (double value) {
    print('Finish value is ' + value.toString());
  },
  onChanged: (double value) {
    if (vm.isRatingPlace) {
      setState(() {
        _place.value = value;
      });
    }
  },
  activeColor: HeatMapColors.getOnFireColor(_place.value),
  inactiveColor: Colors.black45,
))

Answer 1

您可以使用 Column 并在顶部绘制值，请查看此示例:

     double value = 0.0;

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 15.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: List.generate(10, (index) => Text("$index")),
              ),
            ),
            Slider(
              value: value,
              min: 0.0,
              max: 10.0,
              divisions: 10,
              onChangeStart: (double value) {
                print('Start value is ' + value.toString());
              },
              onChangeEnd: (double value) {
                print('Finish value is ' + value.toString());
              },
              onChanged: (double newValue) {
                setState(() {
                  value = newValue;
                });
              },
              activeColor: Colors.blue,
              inactiveColor: Colors.black45,
            ),
          ],
        ));
      }