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

In the previous article, we have built a complete project framework, and have learned how to load local picture resources, so today we will use the knowledge learned, to imitate the construction of wechat discovery interface; Let’s take a look at the final result:

Custom cell

Properties and constructors

First of all, let’s take a look at the screen, every item of elements, the element most entries, is the shopping items, there are five elements: icon and the title, subtitle, red dot (called a icon), arrows, but because the arrow this element is set in each item, so we are in the custom, you just need to expose four elements; Also, since subheadings and subicons are not available for every item, the period should be set to null-safe:

  final String? iconName; // The icon name
  final String? title; / / name
  final String? subTitle; / / subheadings
  final String? subIconName; // Subicon name

  FoundCell({
    required this.iconName, // It must be
    required this.title, // It must be
    this.subTitle,
    this.subIconName,
  }) : assert(title ! =null.'Title cannot be empty'), assert(iconName ! =null.'iconName cannot be empty ');
Copy the code

Assert asserts that an error will be reported when either of the title and iconName attributes are empty;

layout

Looking at the entry as a whole, we can divide the elements on the entry into two parts:

  • Part ONE: icon, title;
  • Part two: Subicon, subtitle, arrow
  • The first and second sections are laid out at each end of the entry

Well, we useRowLayout:First look at the left, the left two elements: icon and title, we can inContainerThe use ofRowMake the layout and add to itImageandTextTwo parts:

  • ICONS and titles have white space above, below, left, and right, which we usepaddingAdd inner margins to parts;
  • There is a space between the icon and the title, useSizeBoxincrease15Pixel whitespace;

The element on the right is divided into three parts: subtitle, subicon, and arrow. However, the subtitle and subicon are not required to be displayed, so they need to be judged according to their properties:

  • Subtitle: When the subtitle is empty, we return it directlyTextThe widget assigns an empty string, otherwise subtitle;
  • Child icon: When the child icon is empty, we return an emptyContainerComponent, otherwise returnImage;

Image.asset(“) and AssetImage(“) are two ways to load local images;

Interface layout

As a whole, the interface is built with a ListView. We have used ListView before, and we have used ListView before:

ListView.builder(itemBuilder: itemBuilder)
Copy the code

Finding that the interface is relatively simple and the number of items is limited, let’s take a different approach today:Directly throughListViewConstructor to add all entries, line by line, toListViewThe above;

So how do you add gaps between entries, there are two ways, one is add, rightContainerOne is to useSizeBox, here we useSizeBoxTo add an interval between entries:

Secant line processing

We noticed that in wechat, there is a dividing line between two adjacent cells, and the left side of the dividing line is aligned with the text. So how do we implement this dividing line? Here we recommend Row. The first widget that comes to mind is basically a Container, but note that when using Container, either the padding or margin will show a blank area on the left, so the bottom will be gray.

We use it hereRow, can be inRowAdd twoContainer, first white background, width50, the second gray background, height is0.5:

Subtitle and subicon