Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

Implementation of flutterExpansionTile level menu

2025-02-27 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

This article will explain in detail the implementation of the flutterExpansionTile level menu for you. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Development environment

Win10 Android Studio

Effect.

Used for multi-level menu display, or selection.

Such as every province, city and county

Such as the diseases and insect pests of trees

Key code

@ override Widget build (BuildContext context) {return ListTile (title: _ buildItem (widget.bean),);} Widget _ buildItem (NameBean bean) {if (bean.children.isEmpty) {return ListTile (title: Text (bean.name), onTap: () {_ showSeletedName (bean.name);},) } return ExpansionTile (key: PageStorageKey (bean), title: Text (bean.name), children: bean.children.map (_ buildItem). ToList (), leading: CircleAvatar (backgroundColor: Colors.green, child: Text (bean.name.substring (0prime1), style: TextStyle (color: Colors.white),);}

Analysis.

Api:ExpansionTile algorithm: recursion

1. The use of ExpansionTile

Three parameters are generally passed in

Key,title,children

Title: the text above each line; children: the sub-entry under the menu, which is an array; key: pass in PageStorageKey according to the source code to save the state during sliding

two。 Recursion

Some entries have child entries, some do not, and each piece of data is traversed recursively.

Use bean.children.isEmpty to end recursion; for example, Beijing in the "municipality directly under the Central Government", there is no "city" below, that is, children.isEmpty. At this time, you should end the recursion and return ListTile;, such as "Heilongjiang" under "provincial administrative unit". There are many "cities". You do not need to continue to traverse the return hierarchy menu ExpansionTile.

3. Source code

To learn flutter, you can try to look at the comments on the corresponding source code if you don't know much about it.

/ / A single-line [ListTile] with a trailing button that expands or collapses/// the tile to reveal or hide the [children]. / This widget is typically used with [ListView] to create an/// "expand / collapse" list entry. When used with scrolling widgets like/// [ListView], a unique [PageStorageKey] must be specified to enable the/// [ExpansionTile] to save and restore its expanded state when it is scrolled/// in and out of view./ See also:/ * [ListTile], useful for creating expansion tile [children] when the/// expansion tile represents a sublist./// * The "Expand/collapse" section of/// .class ExpansionTile extends StatefulWidget {

The above paragraph is the source code comment for ExpansionTile. At a cursory glance, you will find several familiar words: ListView,ListTile is good. To achieve the effect of hierarchical menu, you need to use ListView and ListTile together. The _ buildItem () method in the key code posted above is exactly in line with this point. Return ExpansionTile when there are child entries and ListTile when there are no child entries.

So much for the implementation of the flutterExpansionTile level menu. I hope the above content can be of some help to you and learn more. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report