Question

我正在使用Flutter滑块小部件，在滑块上点击/拖动会移动滑块的progress / 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),
      ),
   ),
);

Answer 1

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

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

Answer 3

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

您正在使用的颤动滑块本身就是一个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。

希望有帮助！

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

3 个答案: