“This is the 12th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

We have achieved the effect of wechat discovery interface, but there is still a problem at this time, how to deal with the clicking event of cell, and the state change of cell clicking, such as background color, etc. In this article, we will explain them one by one;

Cell click events

ourcellIs to useContainerTo build, butContainerDoes not support gesture operation inFlutterIn, the gesture operation passesGestureDetectorTo implement. We will beContainerwithGestureDetectorWrap it so that we can define click events:

The little knowledge GestureDetector

GestureDetector is a functional component of Flutter for gesture recognition. Through it, we can recognize various gestures. A Listener is encapsulated inside to identify semantic gestures.

We implement gesture operations by including Container in GestureDetector. Common gesture operations are as follows:

  • onTap: click;
  • onTapDown: press;
  • onTapCancel: cancel;
  • onDoubleTap: double-click;
  • onLongPress: changan;

The Navigator is introduced

It is a routing management component that provides methods to open and exit the routing page. The Navigator manages a collection of active routes through a stack. The current page is usually the route to the top of the stack. The two most commonly used methods are:

  • Future push(Route route)
    • Will give the routeInto the stackTo open a new screen, the return value is oneFutureObject to receive new routesOut of the stackData returned when the page is closed;
  • bool pop([result])
    • Route the top of the stackOut of the stack.resultIs the data returned to the previous page when the page is closed.

In addition, Navigator has many other methods, such as navigator. replace, navigator. popUntil, etc., which we will use later.

Cell Click to switch to the page

The click event of the cell has already been completed. How can we not push the cell? Next we demonstrate how to use Navigator to push; Through the definition of the push method, we know that a Route needs to be passed to the push method. There is a ready-made Route in the Flutter, which we use here to operate. Its definition is as follows:

  MaterialPageRoute({
    required this.builder,
    RouteSettings? settings,
    this.maintainState = true.bool fullscreenDialog = false,})Copy the code
  • builderIs aWidgetBuilderType to build the contents of the routing page. The return value is aWidget. Normally we implement this callback to return the instance of the route;
  • settingsContains the configuration information of the route, such as name, whether the initial route (home page);
  • maintainStateBy default, when a new route is pushed, the original route is still stored in memory, which can be set if you want to release all resources occupied by the route when it is not usedmaintainStateforfalse;
  • fullscreenDialogIndicates whether the new routing page is a full-screen modal dialog box.iOS, if thefullscreenDialogfortrue, the new page will slide in from the bottom of the screen (not horizontally);

For example, we pass a Builder to the constructor of the MaterialPageRoute. Builder is usually understood to be used for rendering, and its type is defined as:

typedef WidgetBuilder = Widget Function(BuildContext context);
Copy the code

Simply put, it’s a beltBuildContext contextParameter, whose return value isWidgetI’m just saying, we need to bebuilderTo define a returnThe new page(need to call the interface) method, method with parametersBuildContext context:

DetailPage is the new interface we will push to open. In the new interface, we define its constructor and pass a title to display the navigation bar 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 ?? ' '),),); }}Copy the code

The effect is as follows:

Stateful cell

We notice that when the cell is clicked, the wechat entry will turn gray and then return to white. At this point, it is obvious that wechat cell is stateful, so we need to change our cell from StatelessWidget to StatefulWidget.

After changing to a stateful StatefulWidget, we need to create FoundCellState inherited from State:

class _FoundCellState extends State<FoundCell> {}Copy the code

And then, put the originalbuildMethod, transfer to_FoundCellStateAfter the transfer, we will find that the original property is not directly accessible, so we need to usewidget.titleTo access thetitleProperties:

The widget at this point points to our defined StatefulWidget, FoundCell;

At this point, we need to deal with the three states of the gesture: click, click down, cancel;

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

We printed the numbers in each of the three gesture events and found:

  • forPush the operationAnd the output2 1;
  • Click and drag operation, output2, 3,;

So, in other words, we need to beonTapDownIn the method, willcellThe background turns gray,onTapandonTapCancelIn both methodscellBackground becomes white:The effect is as follows:

It is important to note that if the cell is very complex, changing the entire cell to stateful will affect performance. If the cell is complex, we only need to change the parts of the widgets that need to change the state to statefulWidgets. When the entire cell is stateful, the cell is not rendered as a whole; Widgets are descriptions of interfaces, not real interfaces; When you rebuild, you build descriptions, not the interface itself; The real performance drain is something else, which we’ll talk about later;