Question

如何在Flutter中更改ListView的发光效果的颜色？

Answer 1

在这里阅读GlowingOverscrollIndicator似乎可以更改ThemeData.accentColor的值来更改过度滚动发光的颜色。

您可以尝试使用类似的方法将Theme的更改限制为仅ListView

//store the current Theme to restore it later
final ThemeData defaultTheme = Theme.of(context);

Theme(
  //Inherit the current Theme and override only the accentColor property
  data: Theme.of(context).copyWith(
    accentColor: Colors.yellow
  ),
  child: ListView.builder(
      //suppose data it's an array of strings
      itemBuilder: (BuildContext context, int index) =>
          EntryItem(data[index], defaultTheme),
      itemCount: data.length,
  ),
);

//this is your class to render rows
class EntryItem extends StatelessWidget {
  const EntryItem(this.entry, this.defaultTheme);

  final String entry;
  final ThemeData defaultTheme;

  Widget _buildTiles(String entry) {
    return Theme(
      data: defaultTheme,
      child: Text(entry)
    );
  }

  @override
  Widget build(BuildContext context) {
    return _buildTiles(entry);
  }
}

您可以详细了解如何设置Theme here
的样式

Answer 2

不使用主题的另一个选项可能是：

1-将ListView包裹在GlowingOverscrollIndicator

中

2-用新的滚动行为将GlowingOverscrollIndicator包裹在ScrollConfiguration中

您在这里：

  ScrollConfiguration(
            behavior: ScrollBehavior(),
            child: GlowingOverscrollIndicator(
              axisDirection: AxisDirection.down,
              color: Colors.yellow,
              child: ListView.builder(
                physics: ClampingScrollPhysics(),
                itemCount: 15,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text("testing :$index"),
                  );
                },
              ),
            ),
          ),

Answer 3

只需将此添加到 main.dart 中的 MaterialApp 小部件

theme: ThemeData(
          accentColor: Colors.blue,
        ),

Answer 4

这里有一个小部件可以更改后代小部件的过滚动颜色（在这种情况下，您的ListView）：

/// Overrides the [GlowingOverscrollIndicator] color used by descendant widgets.
class GlowingOverscrollColorChanger extends StatelessWidget {
  final Widget child;
  final Color color;

  const GlowingOverscrollColorChanger({Key key, this.child, this.color})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ScrollConfiguration(
      behavior: SpecifiableOverscrollColorScrollBehavior(color),
      child: child,
    );
  }
}

class SpecifiableOverscrollColorScrollBehavior extends ScrollBehavior {
  final Color _overscrollColor;

  const SpecifiableOverscrollColorScrollBehavior(this._overscrollColor);

  @override
  Widget buildViewportChrome(
      BuildContext context, Widget child, AxisDirection axisDirection) {
    switch (getPlatform(context)) {
      case TargetPlatform.iOS:
      case TargetPlatform.macOS:
        return child;
      case TargetPlatform.windows:
      case TargetPlatform.linux:
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
      default:
        return GlowingOverscrollIndicator(
          child: child,
          axisDirection: axisDirection,
          color: _overscrollColor,
        );
    }
  }
}

用法应为：

Widget build() {
 GlowingOverscrollColorChanger(
  color: overscrollColor,
  child: ListView(...),
 );
}

Answer 5

如果您将 ThemeData 与 colorScheme 一起使用，值“secondary”会影响发光颜色。

主题数据( 颜色方案：颜色方案（ [...] 次要：Colors.red， [...]）， );

Answer 6

只需在 main.dart 中添加 accentColor: Colors.red

至：MaterialApp(theme:ThemeData(accentColor: Colors.red))

如何在Flutter中更改ListView的过度滚动发光效果的颜色？

6 个答案: