首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在颤振中消除InkWell在父ListView外的悬停颜色溢出?

如何在颤振中消除InkWell在父ListView外的悬停颜色溢出?
EN

Stack Overflow用户
提问于 2021-12-14 00:22:48
回答 2查看 747关注 0票数 3

我有一个带有一些静态内容的页面,还有一个ListView,它使用InkWell定制列表块。我的问题是:如果您将光标悬停在靠近InkWell的ListView顶部或底部并开始滚动,则悬停颜色将显示在ListView的边界之外,即使其他内容如您所期望的那样被剪短。我需要列表项上的悬停状态,但不希望悬停颜色延伸到ListView的预定边界。是否有一种方法可以确保ListView剪辑那些InkWells的悬停颜色,还是应该使用不同的/自定义小部件解决方案?我尝试过用不同的父母(容器等)包装InkWell,并尝试在几个地方设置clipBehavior,但没有效果。

下面是一个从随机颤振例子中复制出来的简单案例。注意CustomListItem中的InkWell和MyStatelessWidget中的ListView。

代码语言:javascript
运行
复制
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...',
        ),
      ],
    ),
          ),
        ],
      );
  }
}

供视觉参考的图像:

EN

回答 2

Stack Overflow用户

发布于 2021-12-14 01:17:45

可以对指定的列表视图使用HoverWidgetHoverContainer

代码语言:javascript
运行
复制
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

票数 1
EN

Stack Overflow用户

发布于 2022-09-23 02:55:37

用材料包装油墨或InkWell。

代码语言:javascript
运行
复制
return Padding(
      padding: const EdgeInsets.symmetric(vertical: 5.0),
      child: Material(
        child: InkWell(
          onTap: () {},
          hoverColor: Colors.pink,
          child: Row

请参阅#73315

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70342421

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档