在我的界面中,我有一排这样的容器
.
我的 idea 是,当我将手指放在这些容器上时,我手指下的那个会变大(以及其他变化,但这不是重点).
我知道如何使用GestureDetector
,当我用"ONTAP"轻敲容器时,它会变大.但如果你按住手指并将其拖到另一个容器中,一切都不会改变.理想情况下,我希望能够检测到用户在touch 屏幕时将手指悬停在容器上.
如果有人能给我建议,我将不胜感激.提前谢谢您!
在我的界面中,我有一排这样的容器
.
我的 idea 是,当我将手指放在这些容器上时,我手指下的那个会变大(以及其他变化,但这不是重点).
我知道如何使用GestureDetector
,当我用"ONTAP"轻敲容器时,它会变大.但如果你按住手指并将其拖到另一个容器中,一切都不会改变.理想情况下,我希望能够检测到用户在touch 屏幕时将手指悬停在容器上.
如果有人能给我建议,我将不胜感激.提前谢谢您!
你可以在GestureDetector
上用onVerticalDragUpdate
.
class DraUILien extends StatefulWidget {
const DraUILien({super.key});
@override
State<DraUILien> createState() => _DraUILienState();
}
class _DraUILienState extends State<DraUILien> {
int? activeIndex;
final double containerWidth = 30;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GestureDetector(
onVerticalDragUpdate: (details) {
activeIndex =
details.localPosition.dx ~/ (containerWidth + 16); //16 padding
setState(() {});
},
child: SizedBox(
height: 200,
child: Row(
children: List.generate(
10,
(index) => Padding(
padding: const EdgeInsets.all(8.0),
child: AnimatedContainer(
duration: Duration(milliseconds: 300),
color: index == activeIndex ? Colors.blue : Colors.grey,
width: containerWidth,
height: index == activeIndex ? 200 : 100,
),
),
),
),
),
)),
);
}
}
玩弄逻辑,进行更多的定制.如果您需要ONTAP功能,请try 包含ONPAN Down