392 字
2 分钟
Cell点击跳转
2021-11-18
2026-10-12
无标签

前言#

在 iOS 开发中,TableView 的 cell 的点击事件是通过代理处理的。那么在 Flutter 中,我们又该怎么处理呢?

首先我们看看点击事件一般是怎样处理的。

点击事件#

这里我们可以使用 GestureDetector widget 来包装需要处理点击事件的 widget 。

事件回调 onTap 本质是一个无参数的函数。

/// A tap with a primary button has occurred.
///
/// This triggers when the tap gesture wins. If the tap gesture did not win,
/// [onTapCancel] is called instead.
///
/// See also:
///
/// * [kPrimaryButton], the button this callback responds to.
/// * [onTapUp], which is called at the same time but includes details
/// regarding the pointer position.
final GestureTapCallback? onTap;
/// Signature for when a tap has occurred.
///
/// See also:
///
/// * [GestureDetector.onTap], which matches this signature.
/// * [TapGestureRecognizer], which uses this signature in one of its callbacks.
typedef GestureTapCallback = void Function();

这样我们就可以通过为 Cell 添加一个回调类型的成员,来传入事件。

class MomentHomeCell extends StatelessWidget {
final String title;
final String? subTitle;
final String imageName;
final String? subImageName;
final GestureTapCallback? didSelected;
MomentHomeCell(
{required this.title,
this.subTitle,
required this.imageName,
this.subImageName,
this.didSelected});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: didSelected,
child: ...,
);
}
}

使用的地方就可以直接传入事件了:

MomentHomeCell(
title: '朋友圈',
imageName: 'images/朋友圈.png',
didSelected: () {
print('111');
},
),

页面跳转 Navigator#

在 iOS 中我们都是通过 NavigationController 来进行页面跳转的。在 Flutter 中就要用到 Navigator 这个 widget 来进行处理了。

class _MommentPageState extends State<MommentPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
...
),
body: Container(
color: Colors.brown,
child: ListView(
children: <Widget>[
MomentHomeCell(
title: '朋友圈',
imageName: 'images/朋友圈.png',
didSelected: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) => MomentDetailPage(title: '朋友圈',),
)
);
},
),
...
],
),
),
);
}
}