我有一个包含一些静态内容的页面和一个使用InkWell自定义列表平铺的ListView。如果您将光标悬停在ListView顶部或底部附近的InkWell上并开始滚动,则悬停颜色会显示在ListView的边界之外,即使其他内容如您所期望的那样被剪切。我需要列表项上的悬停状态,但不希望悬停颜色超出ListView的预期边界。是否有办法确保ListView也能剪切这些InkWell的悬停颜色,或者我是否应该寻找一个不同的/自定义的小部件解决方案?我尝试过用不同的父控件 Package 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...',
),
],
),
),
],
);
}
}
目视参考图像:第一节第一节第一节第一节第一次
3条答案
按热度按时间vvppvyoh1#
您可以将
HoverWidget
和HoverContainer
用于指定的列表视图。更多详情请登陆官网:https://pub.dev/packages/hovering/example
okxuctiv2#
用材料包裹墨水或墨水池。
参见#73315
0yg35tkg3#
设置悬停颜色:Colors.transparent