如何增加Flutter滑块部件的“触摸区域”？

Question

我正在使用一个Flutter滑块小部件，点击/拖动滑块会移动滑块的进度/activeColor。然而，似乎只有 直接 触摸到滑块才会触发事件，而且总是直接用手指碰到滑块很难。是否有一种方法来扩展Slider的“触摸区域”？ 这是我目前的代码:

return new Center(
    child: new Container(
      height: 2.0,
      child: new Slider(
        min: 0.0,
        max: 1.0,
        activeColor: Colors.grey[50],
        value: _getUnitProgress(model),
        onChanged: (double value) => _unitSeek(value, model),
      ),
   ),
);

- Mary

---

在SliderTheme中修改thumbShape属性。您可以在此答案中查看示例https://dev59.com/5FMI5IYBdhLWcg3wHHgz#61527069 - abanet

Answer 1

最近我也遇到了一个非常类似的问题，发现这个问题其实很容易解决！

你正在使用的Flutter滑块本身就是一个渲染盒子，可以在其给定区域内检测手势（它使用GestureArena），你需要做的唯一一件事情就是增加触摸区域，方法之一是将滑块放在一个容器中，给容器足够的高度和宽度！

return Container(
  height: 100,
  child: Slider(
    value: _value.toDouble(),
    min: 1,
    max: 10,
    divisions: 10,
    label: _value.toString(),
    onChanged: (double newValue) {
      setState(() {
          _value = newValue.round();
        },
      );
    },
  ),
);

在这个例子中，容器的高度为100，因此在这种情况下，触控区域将在滑块的上方50个单位和下方50个单位，滑块将恰好位于中间位置。希望对您有所帮助！

- Abhinav Raj

Answer 2

简单的方法是获取上下文中使用的实际SliderTheme，并仅修改您需要的属性。例如，要修改一个幻灯片：

SliderTheme(
    data: SliderTheme.of(context).copyWith(
    activeTrackColor: Colors.white,
    thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0),
    overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0),
    ),
    child: Slider(
             value: height.toDouble(),
             min: 120.0,
             max: 220.0,
             activeColor: Colors.white,
             inactiveColor: Color(0xFF8D8E98),
             onChanged: (double newValue) {
                 setState(() {
                        height = newValue.round();
                      });
                    },
                  ),
                ),

另一种选择是修改您在应用程序中使用的主题；这样，您可以修改应用程序中的所有滑块：

MaterialApp(
      theme: ThemeData.dark().copyWith(
          sliderTheme: SliderTheme.of(context).copyWith( //slider modifications
            thumbColor: Color(0xFFEB1555),
            inactiveTrackColor: Color(0xFF8D8E98),
            activeTrackColor: Colors.white,
            overlayColor: Color(0x99EB1555),
            thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0),
            overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0),
          ),
          primaryColor: Color(0xFF0A0E21), // theme color
          scaffoldBackgroundColor: Color(0xFF0A0E21)), // theme background color
      home: InputPage(),
);

- abanet

---

这是截至2023年Flutter 3.10版本的正确答案。谢谢！ - Harmen

Answer 3

您不应该将Slider放在高度被包裹的容器中。Slider有一个_kReactionRadius，可以扩大用户的触摸区域。这意味着用户不必直接触摸Slider的水平线来触发onTap()事件：

return Center(
  child: new Slider(
    min: 0.0,
    max: 1.0,
    activeColor: Colors.grey[50],
    value: _getUnitProgress(model),
    onChanged: (double value) => _unitSeek(value, model),
  ),
);

- Mary

---

有没有办法仅限于拇指触控区域？ - eskalera

它仍然不影响触摸区域，例如 Spotify 有一个非常小的滑块，但其命中框很大。 - cs guy

这个答案已经不正确了。Flutter 3.10中的滑块不再具有kReactionRadius属性。 - Harmen