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

Question

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

在探索了这个Scrollbar类之后，我可以看到它使用了highlightColor里面显示的主题scrollbar.dart。

_themeColor = theme.highlightColor.withOpacity(1.0);

尝试将 包裹Scrollbar在 a 中，Theme但仍然没有运气。

下面是我的代码 -

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

任何帮助表示赞赏。提前致谢。

Answer 1

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

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

Answer 2

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

Answer 3

滚动条使用高亮颜色..所以只需在 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: '/',
    )

Answer 4

我是这样改的。

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