如何增加 Flutter 滑块小部件的 "touch zone"？

Question

我正在使用 Flutter 滑块小部件，滑块上的 tapping/dragging 移动滑块的 progress/activeColor。但是，似乎只有直接触摸滑块会导致事件发生，并且很难总是将手指直接触摸到滑块上。有没有办法扩展 Slider 的 "touch zone"？这是我的：

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

Answer 1

您不想将 Slider 包裹在具有高度的 Container 中。 Slider 有一个 _kReactionRadius 可以扩展用户的触摸区域。这意味着用户不必直接触摸滑块的水平线来触发 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),
  ),
);

Answer 2

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

您正在使用的 flutter 滑块本身就是一个 renderBox，它可以检测整个给定区域的手势（它使用 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，滑块将恰好位于中间。

希望对您有所帮助！

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

如何增加 Flutter 滑块小部件的 "touch zone"？

How can I increase the "touch zone" of my Flutter slider widget?

widget

slider

touch

flutter