9/17/2023 0 Comments Lst of reusable flutter widgets![]() ![]() The elements that are filtered out are the buffer elements, and the array is maintained to avoid multiple exposures of a single element on the screen. It records the current element in the mount or unmount lifecycle and maintains the element on the tree in an external list using the InheritedWidget.ĭuring the scrolling process of PowerScrollView, we traverse and check the element array to filter the elements on the screen for performing the exposure callback. Therefore, we have customized the StatefulElement of a cell. The encapsulation of items greatly increases our control. ![]() PowerScrollView is uniformly encapsulated and delivered to users through event callbacks.Īs we know, in PowerScrollView, we encapsulate the item with the smallest granularity using a cell. Exposure capability is a core requirement of various businesses. Additionally, the code has been exposed so often that it leaves it disordered and unrecognizable, making the business hard to run. In Flutter, we usually have to put exposure in the build function, which makes the exposure messy and incorrectly exposes the part that is in the screen buffer. We improved the core features of PowerScrollView for business, such as automatic exposure, scroll to a certain index, waterfall flow, and refresh to load more. The standard and user-defined refresh components are provided. Refresh Configuration: It is used to enhance the refresh flexibility by extracting the refresh items.Event Callback: It is used to sort the events and monitor the required callback only for external use.Controller: It mainly refers to the operations, such as refresh, load more, and scrolling to a certain position control when using PowerScrollView.Data Source Manager: It is used to manage data, and refers to the initialization of Sections and the normal operations such as add, delete, modify, and query.Lastly, a Sliver is added to the head and end of the list to refresh and load more.Īs the following figure shows, PowerScrollView is divided into four parts - Data Source Manager, Controller, Event Callback, and Refresh Configuration. We correspond the header and the footer of a Section respectively to a SliverBox, correspond the content to a SliverList or SliverGrid, and then develop a SliverWaterfall for waterfall layout. Starting from the Flutter native container, CustomScrollView supports the combination of any multiple Slivers that provides SliverList, SliverGrid, SliverBox, which basically meets our requirements. The content of a Section consists of any number of cells. The content is the body of a Section that supports the common layouts, such as list, grid, waterfall flow, and is user-defined. The list provides some functions, such as pull to refresh and load more. The footer is the end of the paragraph, which is used as the tail decoration of a Section. The header refers to the head of a paragraph, which generally serves as the header decoration of a Section and supports to absorb the top. Our design is based on CustomScrollView, which is designed by splicing multiple Slivers to adapt to more complex application scenarios.įrom the perspective of usage, a list consists of several Sections, and a Section is divided into three parts: header, content, and footer. Officially, the advanced Widget for CustomScrollView is also provided. Our goal is to design a better scrolling container that is combined with the mature native scrolling containers based on the characteristics of Flutter.įlutter native has commonly used ListView and GridView, which have a relatively simple layout and simple functions. Due to the uniqueness of Flutter, we cannot copy it. We were deeply impressed by the Section concept of UICollectionView and inspired by the architecture design of RecyclerView. Overall Architectureīefore conducting the architecture design, we had thoroughly investigated the native scrolling containers, such as UICollectionView (for iOS) and RecyclerView (for Android). To solve the preceding business problems, we designed a common page layout for streaming data named PowerScrollView. In terms of performance, the list scrolling fluency in the streaming scenario is deteriorating due to the increasing complexity of business which needs to be solved to improve the user experience. In terms of capability (such as card exposure, scrolling anchor, waterfall layouts), native and some open source solutions in Flutter gradually fail to meet Xianyu's needs due to the evolving business and changing requirements. With the rapid iteration and increasing complexity of the business capability and performance requirements for streaming scenarios are rising. By Xinsu and Guangjiu from Xianyu TechnologyĪt present, Xianyu's major business scenarios have been implemented using Flutter, and stream layout is the most common scenario (such as search, product details). ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |