improve mouse hover effects on click areas

This commit is contained in:
2024-12-18 17:37:03 +08:00
parent 8b9fd0d03d
commit abaeaf4f77
2 changed files with 25 additions and 11 deletions

View File

@@ -41,13 +41,29 @@ class AnimatedTapRegion extends StatefulWidget {
}
class _AnimatedTapRegionState extends State<AnimatedTapRegion> {
bool isScaled = false;
bool isHovered = false;
@override
Widget build(BuildContext context) {
return MouseRegion(
onEnter: (_) => setState(() => isHovered = true),
onExit: (_) => setState(() => isHovered = false),
onEnter: (_) {
isHovered = true;
if (!isScaled) {
Future.delayed(const Duration(milliseconds: 100), () {
if (isHovered) {
setState(() => isScaled = true);
}
});
}
},
onExit: (_) {
isHovered = false;
if(isScaled) {
setState(() => isScaled = false);
}
},
child: GestureDetector(
onTap: widget.onTap,
child: ClipRRect(
@@ -55,7 +71,7 @@ class _AnimatedTapRegionState extends State<AnimatedTapRegion> {
clipBehavior: Clip.antiAlias,
child: AnimatedScale(
duration: _fastAnimationDuration,
scale: isHovered ? 1.1 : 1,
scale: isScaled ? 1.1 : 1,
child: widget.child,
),
),

View File

@@ -264,7 +264,8 @@ class _HistoryState extends State<_History> {
scrollDirection: Axis.horizontal,
itemCount: history.length,
itemBuilder: (context, index) {
return InkWell(
return AnimatedTapRegion(
borderRadius: 8,
onTap: () {
context.to(
() => ComicPage(
@@ -273,11 +274,9 @@ class _HistoryState extends State<_History> {
),
);
},
borderRadius: BorderRadius.circular(8),
child: Container(
width: 92,
height: 114,
margin: const EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Theme.of(context)
@@ -293,7 +292,7 @@ class _HistoryState extends State<_History> {
filterQuality: FilterQuality.medium,
),
),
);
).paddingHorizontal(8);
},
),
).paddingHorizontal(8).paddingBottom(16),
@@ -386,15 +385,14 @@ class _LocalState extends State<_Local> {
scrollDirection: Axis.horizontal,
itemCount: local.length,
itemBuilder: (context, index) {
return InkWell(
return AnimatedTapRegion(
onTap: () {
local[index].read();
},
borderRadius: BorderRadius.circular(8),
borderRadius: 8,
child: Container(
width: 92,
height: 114,
margin: const EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Theme.of(context)
@@ -412,7 +410,7 @@ class _LocalState extends State<_Local> {
filterQuality: FilterQuality.medium,
),
),
);
).paddingHorizontal(8);
},
),
).paddingHorizontal(8),