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

In the previous several articles, we have successfully built the wechat discovery interface and my interface through the knowledge we have learned. Today we are going to try to realize the address book interface of wechat

The address book

Navigation bar button

In the address book interface of wechat, there is a button to add contacts on the right side of the navigation bar. How can this button be implemented?

The AppBar of Flutter has an Actions property that is defined as follows:

final List<Widget>? actions;
Copy the code

By definition, we find that,actionsProperty is an array used to storeWidgetSo let’s put in two simple onesContainerTake a look at the results:We are inactionsTo add a powder and a white twoContainer, resulting in twoContainerDisplay in sequence one at a timeAppBarAnd squeezed our title to the far left, so we delete oneContainer?Just keep oneContainerIn the case of return to normal;

If you want to keep two buttons and want the title in the middle, you can passAppBarthecenterTitleAttribute control:

Next, we will button logic incomplete, the code is as follows:

List the layout

We learned in previous articles how to build oneListView, the process of setting up a contact list will not be described here, and we will directly look at the initial results:In this list, our data sources are divided into two parts:

  • The first part, the four local data in the header, is fixed;
  • The second part, the lower contact list data, this part of the data obtained from other places of personnel information list;

We use the same one for layoutListViewDisplay data from two data sources; Then, in the_itemForRowThrough theindexTo determine the data source for each row to display:

  • ifindexLess than_headerList.length, indicating that is the first four data, then need from_headerListTo obtain data information and pass to_ContactsCellTo display;
  • Otherwise, fromdatasThat is, get the person information data from the contact list and pass it to_ContactsCellTo display;

Now, let’s see_ContactsCellConcrete implementation of:

  • _ContactsCellThe layout is mainly divided into two parts, usingColumnLongitudinal layout;
    • Upper: displayHead picture (icon)andThe name;
    • Lower part: shows the dividing line;
  • Show on topHead portraitandThe nameThe layout is adoptedRowMake a horizontal layout;

Before the _ContactsCell data is passed in, we have passed different parameters through index, so we can determine what parts need to be displayed by the value of different parameters in _ContactsCell:

  • imageAssetIf the value is not empty, it indicates the first four data itemsAssetImageDisplay local ICONS;
  • Otherwise, it means that the contact list data is later and needs to be usedNetworkImageTo display network pictures;