如何在颤动中设置滚动条颜色？

Posted 2023-02-23

【中文标题】如何在颤动中设置滚动条颜色？

【英文标题】：How to set Scrollbar colour in flutter?

【发布时间】：2019-09-08 16:17:56

【问题描述】：

我有一个普通的ListView，它被Scrollbar 类包裹，以在向下滚动时产生一个滚动条。但我想将 Scrollbar 颜色更改为白色，因为我有深色背景。

探索Scrollbar 类后，我可以看到它使用highlightColor 主题，如scrollbar.dart 中所示。

_themeColor = theme.highlightColor.withOpacity(1.0);

尝试将 Scrollbar 包装在 Theme 中，但仍然没有成功。

下面是我的代码 -

Theme(
  data: ThemeData(
    highlightColor: Colors.white, //Does not work
  ),
  child: Scrollbar(
    child: ListView(
      //Normal ListView code
    ),
  ),
)

感谢任何帮助。提前致谢。

【问题讨论】：

github.com/flutter/flutter/blob/master/packages/flutter/lib/src/…

正如我的问题中提到的，我确实已经检查了这个文件。我需要一种方法来更改滚动条的填充颜色。

当你的背景很暗时，它应该已经调整为灰白色

这个解决方案对我有用。但是，我使用copyWith 作为` Theme(data: Theme.of(context).copyWith(highlightColor: Colors.white), ...)`

【参考方案1】：

您可以改用 RawScrollbar 并将 thumbColor 设置为您喜欢的任何颜色。

child: RawScrollbar(
                    thumbColor: Colors.redAccent,
                    radius: Radius.circular(20),
                    thickness: 5,
                    child: //scrollable widget
                   )

【参考方案2】：

滚动条使用高亮颜色.. 所以只需在 MaterialApp 的 Theme 内的 highlightColor 中添加您想要的滚动条颜色即可。

MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        //main color
        primaryColor: const Color(0xffFFC600),
        //main font
        fontFamily: 'Roboto-Medium',
        //swatch stretching
        primarySwatch: goldenThemeColor,
        visualDensity: VisualDensity.adaptivePlatformDensity,

        splashColor:  const Color(0xffFFC600),

        //color for scrollbar
        highlightColor: Color(0xffffc600)

      ),

      routes: 
        '/' : (context) => SplashScreen(),
        ...
      
      initialRoute: '/',
    )

【讨论】：

如果您在 CupertinoApp 中使用滚动条会怎样？

将滚动条主题添加到您的 ThemeData 类会更安全。在该类中，只需覆盖 thumbColor。

【参考方案3】：

我是这样改的。

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      debugShowCheckedModeBanner: false,

      theme: ThemeData.light().copyWith(
        scrollbarTheme: ScrollbarThemeData().copyWith(
          thumbColor: MaterialStateProperty.all(Colors.grey[500]),
        )
      ),
    );
  

【讨论】：

你知道这是否对性能有影响吗？

【参考方案4】：

Flutter 现在提供了 scrollbarTheme，您可以使用它来设置全局滚动条主题并更改 thumbColor 属性，如下所示

 ScrollbarThemeData(
  interactive: true,
  isAlwaysShown: true,
  radius: const Radius.circular(10.0),
  thumbColor: MaterialStateProperty.all(
      DarkAppColors.primaryTextColor.withOpacity(0.4)),
  thickness: MaterialStateProperty.all(5.0),
  minThumbLength: 100,
),


  

【讨论】：

添加此代码后，我的 ios 模拟器以某种方式崩溃，丢失连接，仅在 iOS 模拟器上

【参考方案5】：

您可以克隆您链接的文件并更改项目内的颜色，然后使用您克隆的编辑文件而不是使用 Scrollbar()，例如 MyScrollBar()

【讨论】：

这不是最佳解决方案，因为我最终会添加大量代码来更改几行代码。我想知道是否有办法直接设置Scrollbar的颜色。