如何禁用 NavigationRail 目的地图标中的波纹/飞溅效果？

Question

我尝试过的东西：

1. 用Theme小部件包装整个NavigationRail小部件并传入ThemeData，其中、、、全部设置为。splashColorhighlightColorhoverColorhintColorColors.transparent

尽管这似乎消除了最初的“轰动”，但“涟漪”效应仍然普遍存在（特别是onLongPress）。

       Theme(
            data : ThemeData(
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent
            ),
            child: NavigationRail(
              selectedIndex: _selectedIndex,
              onDestinationSelected: (int index) {
                setState(() {
                  _selectedIndex = index;
                });
              },
              labelType: NavigationRailLabelType.selected,
              destinations: [
                NavigationRailDestination(
                  icon: Icon(Icons.favorite_border),
                  selectedIcon: Icon(Icons.favorite),
                  label: Text('First'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.bookmark_border),
                  selectedIcon: Icon(Icons.book),
                  label: Text('Second'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.star_border),
                  selectedIcon: Icon(Icons.star),
                  label: Text('Third'),
                ),
              ],
            ),
          )

2. 使用Semantics包装NavigationRail并将其设置为或仅将其包装在ExcludeSemantics小部件中excludeSemanticstrue

PS：我不想覆盖MaterialApp根目录中的整个ThemeData ，尽管我在NavigationRailThemeData类中没有看到任何引用此属性的内容

PPS： NavigationRail.dart文件（接近结尾）中有一个派生自ColorScheme类的类，该类接受Semantics小部件，该小部件具有需要禁用的所有属性，即定义颜色、形状和半径的InkResponse小部件飞溅/波纹 NavigationRail.dart

这是 flutter.dev 为方便复制/粘贴而提供的示例代码（在 dartpad.dev 中效果很好）

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          Theme(
            data : ThemeData(
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent
            ),
            child: NavigationRail(
              selectedIndex: _selectedIndex,
              onDestinationSelected: (int index) {
                setState(() {
                  _selectedIndex = index;
                });
              },
              labelType: NavigationRailLabelType.selected,
              destinations: [
                NavigationRailDestination(
                  icon: Icon(Icons.favorite_border),
                  selectedIcon: Icon(Icons.favorite),
                  label: Text('First'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.bookmark_border),
                  selectedIcon: Icon(Icons.book),
                  label: Text('Second'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.star_border),
                  selectedIcon: Icon(Icons.star),
                  label: Text('Third'),
                ),
              ],
            ),
          ),
          VerticalDivider(thickness: 1, width: 1),
          // This is the main content.
          Expanded(
            child: Center(
              child: Text('selectedIndex: $_selectedIndex'),
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

这对我有用：

Theme(
  data: ThemeData(
     highlightColor: Colors.transparent,
     splashFactory: NoSplash.splashFactory,
  ),
  child: NavigationRail(...)

Answer 2

只需添加splashFactory: NoSplash.splashFactory到您的主题数据即可。