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

This article mainly explains "how to use ListWheelScrollView in Flutter Widgets". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use ListWheelScrollView in Flutter Widgets".

Basic usage

When displaying a large amount of data, we will first think of using ListView. If you think ListView is simple and boring, you can use ListWheelScrollView,ListWheelScrollView and ListView homologous, but its rendering effect is similar to the wheel (or drum). Instead of sliding on the plane, it rotates the wheel. Let's take a look at the effect:

The usage of ListWheelScrollView is basically the same as that of ListView, with basic usage:

ListWheelScrollView (itemExtent: 150, children: [...],)

Children is a child control, and itemExtent specifies the height of each Item.

This approach is obviously unscientific when there is a large amount of data, just like ListView.builder, and its usage is as follows:

ListWheelScrollView.useDelegate (itemExtent: 150, childDelegate: ListWheelChildBuilderDelegate (builder: (context, index) {return Container (margin: EdgeInsets.symmetric (vertical: 10, horizontal: 30), color: Colors.primaries [index% 10], alignment: Alignment.center, child: Text ('$index'),) }, childCount: 100),); adjust the diameter

ListWheelScrollView renders like a wheel, setting diameterRatio to adjust its diameter attributes:

ListWheelScrollView (itemExtent: 150, diameterRatio: 1, children: [...],)

DiameterRatio is the ratio of the diameter of the cylinder to the size of the spindle render window, and the default value is 2. If vertical, the size of the spindle render window is the height of ListWheelScrollView. The smaller the diameterRatio, the more round the cylinder.

Adjust perspective

The perspective attribute represents a cylindrical projection perspective view, which is similar to the perspective projection in OpenGLES, which is understood as the distance to see the cylinder. 0 means viewing from infinity, and 1 indicates the range of values from infinity. Note that the value is left open and right closed. The default value is 0.003. The higher the value, the more rounded the rendering effect is. The usage is as follows:

ListWheelScrollView (itemExtent: 150, perspective: 0.003, children: [...],); offAxisFraction

The offAxisFraction attribute represents the degree to which the wheel deviates horizontally from the center, as follows:

ListWheelScrollView (itemExtent: 150, offAxisFraction: 13, children: [],)

The effect of a value of offAxisFraction from 0 to 2:

Magnifying glass

Use the useMagnifier and magnification attributes to achieve the magnifying glass effect. Whether useMagnifier enables the magnifying glass, the magnification attribute is magnification. The usage is as follows:

ListWheelScrollView (itemExtent: 150, useMagnifier: true, magnification: 1.5, children: [],)

The effect is as follows:

Squeeze

The squeeze property represents the ratio of the number of child controls on the wheel to the number of child controls on a flat list of the same size, for example, if the height is 100px and [itemExtent] is 20px, then five items will be placed in an equivalent flat list. When squeeze is 1, five child controls are also displayed in RenderListWheelViewport. When squeeze is 2, 10 child controls are displayed in RenderListWheelViewport with a default value of 1. The usage is as follows:

ListWheelScrollView (itemExtent: 150,150, squeeze: 1, children: [],); thank you for reading, the above is the content of "how to use Flutter Widgets's ListWheelScrollView". After the study of this article, I believe you have a deeper understanding of how to use Flutter Widgets's ListWheelScrollView, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.