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

Question

我正在使用 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),
      ),
   ),
);

Answer 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 处，滑块将正好位于中间。

希望能帮助到你！

Answer 2

您不想将滑块包裹在具有高度的容器中。Slider 有一个_kReactionRadius，可以扩展用户的触摸区域。这意味着用户不必直接触摸 Slider\xe2\x80\x99s 水平线来触发 onTap()：

\n\n

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

\n