如何在 Flutter 中删除父 ListView 之外的 InkWell 悬停颜色溢出？

Posted 2023-02-23

【中文标题】如何在 Flutter 中删除父 ListView 之外的 InkWell 悬停颜色溢出？

【英文标题】：How to remove InkWell hover color overflow outside parent ListView in Flutter?

【发布时间】：2022-01-17 09:12:35

【问题描述】：

我有一个包含一些静态内容的页面和一个使用 InkWell 的带有自定义列表图块的 ListView。这是我的问题：如果您将光标悬停在靠近 ListView 顶部或底部的 InkWell 上并开始滚动，则悬停颜色会显示在 ListView 的边界之外，即使其他内容已按照您的预期进行剪辑。我需要列表项上的悬停状态，但不希望悬停颜色超出 ListView 的预期边界。有没有办法确保 ListView 也为这些 InkWell 剪辑悬停颜色，或者我应该查看不同的/自定义小部件解决方案？我尝试用不同的父级（容器等）包装 InkWell，并尝试在几个地方设置 clipBehavior，但无济于事。

这是一个从随机 Flutter 示例复制的简单案例。注意CustomListItem 中的 InkWell 和MyStatelessWidget 中的 ListView。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  


class CustomListItem extends StatelessWidget 
  const CustomListItem(
    Key? key,
    required this.thumbnail,
    required this.title,
    required this.user,
    required this.viewCount,
  ) : super(key: key);

  final Widget thumbnail;
  final String title;
  final String user;
  final int viewCount;

  @override
  Widget build(BuildContext context) 
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 5.0),
      child: InkWell(
        onTap: () ,
        hoverColor: Colors.pink,
        child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Expanded(
            flex: 2,
            child: thumbnail,
          ),
          Expanded(
            flex: 3,
            child: _VideoDescription(
              title: title,
              user: user,
              viewCount: viewCount,
            ),
          ),
          const Icon(
            Icons.more_vert,
            size: 16.0,
          ),
        ],
      ),),
    );
  


class _VideoDescription extends StatelessWidget 
  const _VideoDescription(
    Key? key,
    required this.title,
    required this.user,
    required this.viewCount,
  ) : super(key: key);

  final String title;
  final String user;
  final int viewCount;

  @override
  Widget build(BuildContext context) 
    return Padding(
      padding: const EdgeInsets.fromLTRB(5.0, 0.0, 0.0, 0.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            title,
            style: const TextStyle(
              fontWeight: FontWeight.w500,
              fontSize: 14.0,
            ),
          ),
          const Padding(padding: EdgeInsets.symmetric(vertical: 2.0)),
          Text(
            user,
            style: const TextStyle(fontSize: 10.0),
          ),
          const Padding(padding: EdgeInsets.symmetric(vertical: 1.0)),
          Text(
            '$viewCount views',
            style: const TextStyle(fontSize: 10.0),
          ),
        ],
      ),
    );
  


class MyStatelessWidget extends StatelessWidget 
  const MyStatelessWidget(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Column(
        children: [
          Container(
            padding: const EdgeInsets.only(bottom: 20),
            child: const Text('Hover over the first list item and scroll... the content is clipped, but not the hover color...'),
          ),
          Expanded(
            child: ListView(
      padding: const EdgeInsets.all(8.0),
      itemExtent: 106.0,
      children: <CustomListItem>[
        CustomListItem(
          user: 'Flutter1',
          viewCount: 999001,
          thumbnail: Container(
            decoration: const BoxDecoration(color: Colors.blue),
          ),
          title: 'Test One...',
        ),
        CustomListItem(
          user: 'Flutter2',
          viewCount: 999002,
          thumbnail: Container(
            decoration: const BoxDecoration(color: Colors.orange),
          ),
          title: 'Test Two...',
        ),
        CustomListItem(
          user: 'Flutter3',
          viewCount: 999003,
          thumbnail: Container(
            decoration: const BoxDecoration(color: Colors.blue),
          ),
          title: 'Test Three...',
        ),
        CustomListItem(
          user: 'Flutter4',
          viewCount: 999004,
          thumbnail: Container(
            decoration: const BoxDecoration(color: Colors.orange),
          ),
          title: 'Test Four...',
        ),
        CustomListItem(
          user: 'Flutter5',
          viewCount: 999005,
          thumbnail: Container(
            decoration: const BoxDecoration(color: Colors.blue),
          ),
          title: 'Test Five...',
        ),
      ],
    ),
          ),
        ],
      );
  

视觉参考图片：

【参考方案1】：

您可以将HoverWidget 和HoverContainer 用于指定的列表视图。

HoverWidget(
            hoverChild: Container(
              height: 200,
              width: 200,
              color: Colors.green,
              child: Center(child: Text('Hover Me..')),
            )
HoverContainer(
              width: 200,
              height: 200,
              hoverHeight: 220,
              hoverWidth: 220,
              color: Colors.red,
              hoverColor: Colors.green,
            )

更多详情见其官网：https://pub.dev/packages/hovering/example