如何修复 Web 上的圆滑圆形滑块形状？答案

【问题标题】：How to fix the Sleek Circular Slider Shape on Web?如何修复 Web 上的圆滑圆形滑块形状？
【发布时间】：2022-07-12 18:03:02
【问题描述】：

我正在使用 SleekCircularSlider，它在 IOS 和 Android 上运行完美，但是当我使用 Web 时，它看起来会变形...

网页上的扭曲滑块

移动设备上的正确滑块

我的代码看起来像文档...

  SleekCircularSlider(
    min: (_prefs.oxiMin>_prefs.oxiRango) ? (_prefs.oxiMin-_prefs.oxiRango)*1.0 : 0.0,
    max: (_prefs.oxiMax+_prefs.oxiRango)*1.0,
    initialValue: _initialOxi!,
    appearance: _cicularApariencia(modificadorOxi, _changeOxi),
    onChangeEnd: (double value) {
      tempOxigeno.oxigeno = double.parse(value.toStringAsFixed(1));
      _initialOxi = double.parse(value.toStringAsFixed(1));
      _changeOxi = false;
      setState(() {});
    }          
  ),

我正在使用 Web Renderer 来保留自定义图标 (flutter run -d chrome --web-renderer html)

Web 上真的支持圆形滑块吗？

如何修复网络上的错误形状？

更新：

我正在使用 FittedBox 进行测试，并且扭曲的外观在网络上继续存在。

我认为错误的行为是由于 CircularSliderAppearance...

  CircularSliderAppearance _cicularApariencia(String Function(double) modifier, bool animationEnabled) {
    List<Color> progColors = [const Color(0xff6d888d), const Color(0xffE0B872), const Color(0xffff7583)];
    return CircularSliderAppearance(startAngle: 330, angleRange: 150,
              customColors: CustomSliderColors(trackColor: Colors.grey[300], gradientStartAngle: 330, gradientEndAngle: 120, dynamicGradient: true, progressBarColors: progColors, hideShadow: true),
              infoProperties: InfoProperties(modifier: modifier,), //bottomLabelText: 'Temp', bottomLabelStyle: TextStyle(color: Colors.grey[700]))
              animationEnabled: animationEnabled,
            );
  }

我用hideshadow: false测试，结果如下：

带有hideshadow: false 的 Web 上的扭曲滑块

【问题讨论】：

标签： flutter flutter-dependencies flutter-web

【解决方案1】：

Ребят, подскажите пожалуйста, я только начинаю изучать flutter, как вместо "%", поставить цельсии, спасибо большое

【讨论】：

【解决方案2】：

我在网络上使用SleekCircularSlider 没有任何问题。

不确定父小部件是什么，但如果您使用的是较小的父小部件，

FittedBox(
    fit: BoxFit.scaleDown,
    child: SleekCircularSlider(...),
),

Boxfit 枚举： https://api.flutter.dev/flutter/painting/BoxFit.html

【讨论】：

谢谢@Ryo Sa。我正在测试，但 FittedBox 不起作用。网络上的错误外观没有变化