「这是我参加11月更文应战的第12天，活动详情检查：2021最终一次更文应战」

咱们现已完成了微信的发现界面的效果，可是此刻还有一个问题，cell的点击事情如何处理，以及cell点击时状况的改变，比方布景色等；这些问题在本篇文章中，咱们来逐个解说；

cell的点击事情

咱们的cell是用Container来构建的，可是Container并不能支持手势操作，在Flutter中，手势的操作经过GestureDetector来完成。咱们将Container用GestureDetector包起来，这样咱们就可以界说点击事情了：

Flutter(十四)实战-cell的点击处理

GestureDetector小常识

GestureDetector是Flutter中一个用于手势辨认的功能性组件，经过它，咱们可以辨认各种手势；在其内部封装了Listener用来辨认语义化的手势；

咱们经过将Container包括在GestureDetector中来完成手势操作，常见的手势操作如下：

  • onTap：点击；
  • onTapDown：按下；
  • onTapCancel：取消；
  • onDoubleTap：双击；
  • onLongPress：长安；

Navigator介绍

它是一个路由办理的组件，供给翻开和退出路由页的办法。Navigator经过一个栈来办理活动路由调集。一般当时屏幕显现的页面便是栈顶的路由。 最常用的两个办法为：

  • Future push(Route route)
    • 将给定的路由入栈，也便是翻开新的界面，回来值是一个Future目标，用来接收新路由出栈(封闭页面)时的回来数据；
  • bool pop([result])
    • 将栈顶路由出栈，result为页面封闭时回来给上一个页面的数据。

除此之外，Navigator还有很多其他办法，如Navigator.replace、Navigator.popUntil等，咱们后续用到再解说；

cell点击跳转界面

cell的点击事情现已完成了，怎样少得了进行push操作呢？接下来咱们演示假如运用Navigator进行push操作；经过push办法的界说，咱们知道需求给push办法传递一个Route，在咱们Flutter中有一个MaterialPageRoute这样一个现成的Route，咱们此处运用它进行操作，其界说如下：

  MaterialPageRoute({
    required this.builder,
    RouteSettings? settings,
    this.maintainState = true,
    bool fullscreenDialog = false,
  })
  • builder是一个WidgetBuilder类型的回调函数，作用是构建路由页面的内容，回来值是一个Widget。一般咱们完成此回调，用来回来路由的实例；
  • settings包括路由的装备信息，比方名称，是否初始路由(首页)；
  • maintainState默认情况，当入栈一个新的路由时，本来的路由仍然会被保存在内存中，假如想要在路由没用的时分开释其所占用的所有资源，则可以设置maintainState为false；
  • fullscreenDialog表示新的路由页面是否是一个全屏的模态对话框。iOS中，假如fullscreenDialog为true，新页面将会从屏幕底部滑入(而不是水平方向)；

咱们比方给MaterialPageRoute的结构办法传递一个builder的参数，一般咱们的理解builder是用来烘托的，其类型界说为：

typedef WidgetBuilder = Widget Function(BuildContext context);

简略来说，便是一个带BuildContext context参数的办法，其回来值为Widget，我便是说，咱们需求在builder中界说一个回来新页面(需求打来的界面)的办法，办法带参数BuildContext context：

Flutter(十四)实战-cell的点击处理

DetailPage是咱们要进行push翻开的新界面，在新界面中，咱们界说了其结构办法，传递一个title，用来显现导航栏标题：

class DetailPage extends StatelessWidget {
  final String? title;
  DetailPage({this.title});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title ?? ''),
      ),
      body: Center(
        child: Text(title ?? ''),
      ),
    );
  }
}

效果如下：

Flutter(十四)实战-cell的点击处理

有状况的cell

咱们留意到，在cell点击的时分，微信的条目是会变灰然后恢复白色的，此刻很明显，微信的cell是有状况的，那么咱们首要需求将咱们的cell从StatelessWidget改为StatefulWidget;

改为有状况的StatefulWidget之后，咱们需求创立FoundCellState承继自State：

class _FoundCellState extends State<FoundCell> {
}

然后，将本来的build办法，搬运到_FoundCellState中来，搬运之后会发现，本来的特点不能直接访问了，此刻咱们需求运用widget.title来访问title特点：

Flutter(十四)实战-cell的点击处理

此刻的widget指向咱们界说的StatefulWidget，也便是FoundCell；

此刻，咱们需求处理手势的三个状况：点击，点下去，取消；

    return GestureDetector(
      onTap: () {
        print('1');
        Navigator.of(context).push(
            MaterialPageRoute(builder: (BuildContext context) {
              return DetailPage(title: widget.title,);
            })
        );
      },
      onTapDown: (TapDownDetails details) {
        print('2');
      },
      onTapCancel: () {
        print('3');
      },
    );

咱们别离在这三个手势事情中打印数字，成果发现：

  • 进行push操作，输出2 1；
  • 点击拖动操作，输出2 3；

那么，也便是说，咱们需求在onTapDown办法中，将cell布景变灰色，onTap和onTapCancel两个办法中将cell布景变白色：

Flutter(十四)实战-cell的点击处理
效果如下：

Flutter(十四)实战-cell的点击处理

需求留意的是，假如cell非常复杂，咱们把cell整个改为有状况的将会影响功能，在cell比较复杂的情况下，咱们只需求将需求改变状况的那部分Widget改为StatefulWidget即可； 在将整个cell都改为有状况时，cell也并非整体烘托；Widget是界面的描绘，并非真正的界面；从头构建时，构建的是描绘，而非界面自身；真正耗费功能的是其他东西，咱们后续再讲；