> For the complete documentation index, see [llms.txt](https://ryukiedev.gitbook.io/wiki/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ryukiedev.gitbook.io/wiki/flutter/08.cell-dian-ji-tiao-zhuan.md).

# 08.Cell点击跳转

### 前言

在 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: '朋友圈',),
                  )
                );
              },
            ),
            ...
          ],
        ),
      ),
    );
  }
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://ryukiedev.gitbook.io/wiki/flutter/08.cell-dian-ji-tiao-zhuan.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.