List control

Features

The list button is often used when a page cannot display all the information, and there are some consistent attribute classifications in each unit information

Scenes

WiFi list, device list, table information

How to use

Open the UI file, create a list control, and add two list item controls to the list. Then you can intuitively see the appearance style of the list. The specific operations are as follows:
Select the list, you can see that it has the following properties

You can try to modify each attribute, and then download the program to the machine to view the specific changes.
Now go to the outline view

You can see that an Item node is generated by default under the list, which represents a row or column of the list, and the Item contains the two ListSub nodes we added.
You can click to select each node to view their respective attributes, and the scope of their effects can be seen on the preview. Note: Each list control can add up to 32 list items.

The properties of Item and List Item controls are similar to the Key controls. You can modify their properties separately and adjust the style. The revised results on my side are as follows:
After adjusting the general appearance of the list in the UI file, compile(How to compile the FlyThings project)。In the automatically generated correlation function, we need to add specific logic code to draw the specific content of the list.
After compiling, in the corresponding Logic.cc source file, each list control will generate three related functions.
- int getListItemCount_ListView1(): Get the length of the list to be drawn For example: there are 100 data to be displayed, then 100 is returned.
- void obtainListItemData_List1: specifically set the display content of each item in the list See the follow-up document for specific examples The above two functions jointly control the display content of the list. More specific function call flow.
- onListItemClick_List1: the click event of the list control When clicking on an item in the list, the system will call this function, and the parameter index represents the index value of the currently clicked list item.

List drawing process

When we want to draw a list, the system first needs to know how many items it has in total, so we provide the int getListItemCount_ListView1() function, which will be called by the system to get the length of the list (the total number of items) ), note that this function is dynamically obtained. During the running of the program, we can return different values according to business needs, and then we can dynamically control the length of the list.

Next, the system will call void obtainListItemData_ListView1(ZKListView *pListView,ZKListView::ZKListItem *pListItem, int index) this function multiple times. For each call, we can use the pointer provided by the parameter to control the details in this function. Each item is specifically displayed.

Example 1. Set the display content of the list item

static void obtainListItemData_ListView1(ZKListView *pListView,ZKListView::ZKListItem *pListItem, int index) {
 //pListItempointer represents a list item, this pointer can only be used in this function
 char buf[32] = {0};
 //Parameter index indicates which item of the list is currently drawn, starting from 0.
 //Here, we format the index value into a string
 snprintf(buf, sizeof(buf), "Item %d", index);
 //Display the string as text in the list item area
 pListItem->setText(buf);
 //如If you have configured the list item "Picture when selected" in the ui file,
 //Then, by setting the selected state of the list item through the following line of code, you can control the list item to display the corresponding state picture
 pListItem->setSelected(true);
}

Example 2. Set the display content of the list item
If we use the list item, we can get the pointer of the list item by the following method, and then manipulate the list item through the newly obtained pointer.

static void obtainListItemData_ListView1(ZKListView *pListView,ZKListView::ZKListItem *pListItem, int index) {
 char buf[32] = {0};
 //Parameter index indicates which item of the list is currently drawn, starting from 0.
 //Here, we format the index value into a string
 snprintf(buf, sizeof(buf), "The first child of item %d", index);
 //We can get the pointer of the list item through the findSubItemByID() function and the ID of the list item
 //Same as the pListItem pointer, the list item pointer found can only be used in this function
 ZKListView::ZKListSubItem* subitem1 = pListItem->findSubItemByID(ID_MAIN_SubItem1);
 if (subitem1 != NULL) {
     //Set the text of the list item 1
     subitem1->setText(buf);
 }

 snprintf(buf, sizeof(buf), "The second child of item %d", index);
 ZKListView::ZKListSubItem* subitem2 = pListItem->findSubItemByID(ID_MAIN_SubItem2);
 if (subitem2 != NULL) {
      //Set the text of the list item 2
     subitem2->setText(buf);
 }
}

List of ideas

In our system, the list is a mapping of a series of rule data. If we want to modify the list, such as adding a piece of data, or modifying a certain item, we should modify the data first, and then trigger a refresh. Then the system automatically calls the obtainListItemData_ListView1 function, in which the display content of the list is set according to the latest data.
This idea is reflected in the following example.

Sample code

We provide a sample list control, refer to the ListViewDemo project in Sample Code.

Sample explanation

Create a list control We create two list controls in turn and try to set different properties and appearances. CycleList control： Turn on the cycle list option
Compile the project This step will automatically generate the code related to the list to the corresponding Logic.cc file.
For specific operations, please refer to《How to compile the FlyThings project》

Create the data structure needed for the List1 list
In general, we will define a structure as a model for each data item in the list

typedef struct {
 //The text displayed in the list item
 const char* mainText;
 //The text to be displayed in list item 1
 const char* subText;
 //Open/close logo
 bool bOn;
} S_TEST_DATA;

We define another structure array to simulate list data

static S_TEST_DATA sDataTestTab[] = {
 { "Test data 1", "testsub1", false },
 { "Test content 2", "testsub2", false },
 { "Test data 3", "testsub3", false },
 { "Test test 4", "testsub4", true },
 { "Test data 5", "testsub5", false },
 { "Test data 6", "testsub6", true },
 { "Test data 7", "testsub7", false },
 { "Test data 8", "testsub8", false },
 { "Test data 9", "testsub9", false },
 { "Test data 10", "testsub10", false },
 { "Test data 11", "testsub11", false }
};

Add list function code

static int getListItemCount_List1(const ZKListView *pListView) {
   //Use the length of the array as the length of the list
   return sizeof(sDataTestTab) / sizeof(S_TEST_DATA);
}

static void obtainListItemData_List1(ZKListView *pListView,ZKListView::ZKListItem *pListItem, int index) {
   //Get the pointer of list item 1, named psubText
   ZKListView::ZKListSubItem* psubText = pListItem->findSubItemByID(ID_MAIN_ListSub1);
   //Get the pointer of list item 2 and name it psubButton
   ZKListView::ZKListSubItem* psubButton = pListItem->findSubItemByID(ID_MAIN_ListSub2);
   pListItem->setText(sDataTestTab[index].mainText);
   //Use index as the subscript, get the corresponding structure from the array, get the text that needs to be displayed from the structure, and finally set it to the corresponding list item
   psubText->setText(sDataTestTab[index].subText);
      //In the UI file, we set the selected image attribute for the list item 2.
   //Here, according to the `bOn` value of the structure, set the selected state of the list item, so that if the member `bOn` is true, it is set to be selected, and the system will automatically display the previously set selected picture
   psubButton->setSelected(sDataTestTab[index].bOn);
}

static void onListItemClick_List1(ZKListView *pListView, int index, int id) {
   //When you click the index item of the list, modify the bOn variable to reverse bOn. In this way, every time you click on the list, the picture will switch once
   //Note that the operation of picture switching is completed in the obtainListItemData_List1 function, and now we only modify the value of this variable.
   sDataTestTab[index].bOn = !sDataTestTab[index].bOn;
  //The last code modified the structure data, now we want to refresh the list immediately, and call refreshListView to force a refresh
    //After triggering the refresh, the system will call the two functions getListItemCount_List1 and obtainListItemData_List1 again, so that the modified data corresponds to the list display.
   mList1Ptr->refreshListView();
}

After adding the code, you can run it to see the actual effect.

List