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

【问题标题】：How can I increase the "touch zone" of my Flutter slider widget?如何增加 Flutter 滑块小部件的“触摸区”？
【发布时间】：2018-01-24 23:25:11
【问题描述】：

我正在使用 Flutter 滑块小部件，在滑块上点击/拖动可移动滑块的进度/activeColor。但是，似乎只有直接触摸滑块会导致事件发生，并且很难始终将手指直接触摸到滑块上。有没有办法扩大滑块的“触摸区”？这就是我所拥有的：

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),
      ),
   ),
);

【问题讨论】：

修改 SliderTheme 中的 thumbShape 属性。在这个答案中，您可以看到一个示例 stackoverflow.com/a/61527069/3793165

标签： widget slider touch flutter

【解决方案1】：

我最近遇到了一个很相似的问题，发现问题太简单了！

您正在使用的颤振滑块本身就是一个渲染框，可以检测整个给定区域的手势（它使用 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 处，滑块将正好在中间。

希望对你有帮助！

【讨论】：

【解决方案2】：

您不想将 Slider 包装在具有高度的 Container 中。 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),
  ),
);

【讨论】：

有没有办法将触摸区限制在拇指上？
它仍然不会影响触摸区，例如 spotify 有一个非常小的滑块，但它的 hitbox 非常大。

【解决方案3】：

简单的方法是获取在您的上下文中使用的实际 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(),
);

【讨论】：