我有一个带有一些静态内容的页面,还有一个ListView,它使用InkWell定制列表块。我的问题是:如果您将光标悬停在靠近InkWell的ListView顶部或底部并开始滚动,则悬停颜色将显示在ListView的边界之外,即使其他内容如您所期望的那样被剪短。我需要列表项上的悬停状态,但不希望悬停颜色延伸到ListView的预定边界。是否有一种方法可以确保ListView剪辑那些InkWells的悬停颜色,还是应该使用不同的/自定义小部件解决方案?我尝试过用不同的父母(容器等)包装InkWell,并尝试在几个地方设置clipBehavior,但没有效果。
下面是一个从随机颤振例子中复制出来的简单案例。注意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...',
),
],
),
),
],
);
}
}
供视觉参考的图像:
发布于 2021-12-14 01:17:45
可以对指定的列表视图使用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
发布于 2022-09-23 02:55:37
用材料包装油墨或InkWell。
return Padding(
padding: const EdgeInsets.symmetric(vertical: 5.0),
child: Material(
child: InkWell(
onTap: () {},
hoverColor: Colors.pink,
child: Row
请参阅#73315
https://stackoverflow.com/questions/70342421
复制相似问题