Flutter

Question

我正在尝试添加带有渐变颜色的侧边导航栏，效果很好。但是，我还将列表图块（仪表板）的悬停颜色设置为红色，但是当我悬停时它没有显示。

我猜测当鼠标悬停时，sidenav 的背景色遮盖了列表图块的颜色。关于如何解决它的任何想法？谢谢！

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        pageTransitionsTheme: PageTransitionsTheme(builders: {
          TargetPlatform.iOS: FadeUpwardsPageTransitionsBuilder(),
          TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
        }),
      ),
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  final navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Drawer(
          elevation: 0,
          child: Container(
            decoration: new BoxDecoration(
              border: Border(
                right: BorderSide(width: 0.0, color: Colors.transparent),
                left: BorderSide(width: 0.0, color: Colors.transparent),
              ),
              gradient: new LinearGradient(
                  colors: [
                    const Color(0xFFBE9CF9),
                    const Color(0xFF5378EE),
                  ],
                  begin: const FractionalOffset(0.0, 0.2),
                  end: const FractionalOffset(1.0, 1.0),
                  stops: [0.0, 1.0],
                  tileMode: TileMode.clamp),
            ),
            child: ListView(
              physics: NeverScrollableScrollPhysics(),
              children: <Widget>[
                Container(
                  width: double.infinity,
                  child: ListTile(
                    hoverColor: Colors.red,
                    enabled: true,
                    title: Padding(
                      padding: const EdgeInsets.all(0.0),
                      child: Row(
                        children: [
                          Icon(
                            Icons.home,
                            color: Colors.white,
                            size: 22.0,
                          ),
                          SizedBox(width: 8),
                          Text(
                            "Dashboard",
                            style: TextStyle(color: Colors.white),
                          ),
                        ],
                      ),
                    ),
                    onTap: () {},
                  ),
                ),
              ],
            ),
          ),
        ),
        Expanded(
          child: Navigator(
            key: navigatorKey,
            initialRoute: '/',
            onGenerateRoute: (settings) {
              return MaterialPageRoute(
                  builder: (context) {
                    return Scaffold(
                      appBar: AppBar(
                        backgroundColor: Colors.transparent,
                        foregroundColor: Colors.black,
                        elevation: 0,
                        iconTheme: IconThemeData(color: Colors.black),
                        title: Text("Title",
                            style: TextStyle(color: Colors.black)),
                      ),
                      body: SafeArea(
                        child: Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Text(""),
                        ),
                      ),
                    );
                  },
                  settings: settings);
            },
          ),
        ),
      ],
    );
  }
}

Answer 1

用 Material 小部件包装您的 ListTile：

Material(
    type: MaterialType.transparency,
    child: ListTile(...),
)

hoverColor 的工作方式 - 将悬停呈现在它找到的第一个 Material 父对象上。树中的第一个是 App 本身，渐变与它重叠。因此，您需要将 ListTile 包装在另一个 Material 小部件中，使其成为渐变之前的第一个小部件。
这是 Flutter 框架的已知行为（搜索类似的 Flutter Inkwell 装饰 问题）

Flutter - 设置 sidenav 渐变颜色时不显示列表图块的悬停颜色（MacOS 应用程序）

Flutter - hover color of list tile not showing when sidenav gradient color is set (MacOS app)

dart

linear-gradients