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

滚动条使用突出显示颜色。因此，只需在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 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]),
        )
      ),
    );
  }
}

Answer 4

您可以克隆链接的文件并更改项目内部的颜色，然后不要使用Scrollbar（），例如，使用MyScrollBar（）（克隆的已编辑文件）

Answer 5

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

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

5 个答案: