如何在Flutter中改变ListView的过卷发光效果的颜色?

cunj1qz1  于 2022-11-30  发布在  Flutter
关注(0)|答案(9)|浏览(187)

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

nzkunb0c

nzkunb0c1#

在这里阅读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

7ivaypg9

7ivaypg92#

另一个不使用主题的选项可以是:
1-将ListView Package 在GlowingOverscrollIndicator
2-使用新的滚动行为将您的GlowingOverscrollIndicator Package 在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"),
                  );
                },
              ),
            ),
          ),
1hdlvixo

1hdlvixo3#

之前的回答表明ThemeData.accentColor从Flutter 2.2开始不起作用
滚动条发光效果的颜色现在在ThemeData.colorScheme.secondary属性(docs)中定义。设置它的最简单方法如下:

Theme(
    data: Theme.of(context).copyWith(
      // accentColor: Color(0xff936c3b), // Previously it was implemented like this
      colorScheme: ColorScheme.fromSwatch(
        accentColor: Color(0xff936c3b), // but now it should be declared like this
      ),
    ),

这个建构函式会设定secondary属性,如下所示:

final Color secondary = accentColor ?? (isDark ? Colors.tealAccent[200]! : primarySwatch);

因此,如果代码中使用了灯光主题,则也可以通过设置ThemeData.colorScheme.primarySwatch来更改泛光效果颜色。

dm7nw8vv

dm7nw8vv4#

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

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

0g0grzrc5#

您应该在新版本的flutter中的MaterialApp小部件中使用此代码。(Flutter 2)

theme: ThemeData(
      colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.green),

  ),
pxiryf3j

pxiryf3j6#

如果将ThemeData与colorScheme一起使用,则值“secondary”会影响光晕颜色。
主题数据(颜色方案:色彩配置([...]次要:Colors.red、[...])、);

zd287kbt

zd287kbt7#

下面是一个小部件,用于更改后代小部件的Overscroll-Color(在本例中为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(...),
 );
}
a9wyjsp7

a9wyjsp78#

“accentColor”已弃用,不应使用。请改用colorScheme.secondary。有关详细信息,请参阅www.example.com上的迁移指南https://flutter.dev/docs/release/breaking-changes/theme-data-accent-properties#migration-guide。此功能在v2.3.0-0.1.pre之后已弃用。
将您的代码替换为

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

对此

theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch()
      .copyWith(secondary: Colors.red),
    ),
2izufjch

2izufjch9#

您还可以在MaterialApp主题中使用此功能

theme: ThemeData(
     colorScheme: ColorScheme.fromSwatch()
              .copyWith(secondary: Colors.red),
    ),

相关问题