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

Question

我有一个普通的

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

如有任何帮助，我们将不胜感激。预先感谢。

Answer 1

您可以使用 RawScrollbar 来代替，并将拇指颜色设置为您喜欢的任何颜色。

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

Answer 2

我是这样改的。

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

Answer 3

滚动条使用突出显示颜色..因此只需在 MaterialApp 中主题内的突出显示颜色中添加所需的滚动条颜色即可完成。

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

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 5

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

Answer 6

我这样解决这个问题：