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

Today, the editor will share with you the relevant knowledge points about how to use Flutter's SingleChildScrollView. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

SingleChildScrollView

SingleChildScrollView is similar to ScrollView in Android in that it can receive only one subcomponent. The definition is as follows:

Const SingleChildScrollView ({Key key, this.scrollDirection = Axis.vertical, / / whether to slide in the opposite direction of reading, for example: scrollDirection is Axis.horizontal, if the reading direction is from left to right (depending on the locale, Arabic is from right to left). / / when reverse is true, the sliding direction is from right to left. In fact, this property essentially determines whether the initial scrolling position of the scrollable component is at the "head" or "tail". When false is taken, the initial scrolling position is at the "head" and vice versa. This.reverse = false, this.padding, / / indicates whether to use the default PrimaryScrollController; in the widget tree when the sliding direction is vertical (scrollDirection value is Axis.vertical) and controller is not specified, the default is true. Bool primary, this.physics, this.controller, this.child, this.dragStartBehavior = DragStartBehavior.start,}): assert (scrollDirection! = null), assert (dragStartBehavior! = null), assert (! (controller! = null & & primary = = true), 'Primary ScrollViews obtain their ScrollController via inheritance from a PrimaryScrollController widget.' 'You cannot both set primary to true and pass an explicit controller.'), primary = primary? Controller = = null & & identical (scrollDirection, Axis.vertical), super (key: key)

In addition to introducing the common properties of scrollable components that we introduced, let's focus on two properties, reverse and primary:

Reverse: this attribute API document explains whether to slide in the opposite direction of reading, for example: scrollDirection value is Axis.horizontal, if the reading direction is from left to right (depending on the locale, Arabic is from right to left). When reverse is true, the sliding direction is from right to left. In fact, this property essentially determines whether the initial scrolling position of the scrollable component is in the "head" or "tail". When taking the false, the initial scrolling position is in the "head", otherwise it is in the "tail", and you can experiment by yourself.

Primary: indicates whether to use the default PrimaryScrollController; in the widget tree when the sliding direction is vertical (scrollDirection value is Axis.vertical) and controller is not specified, true defaults to true

It is important to note that in general, SingleChildScrollView should only be used when the desired content does not exceed the screen too much, because SingleChildScrollView does not support a Sliver-based delay instantiation model, so if you expect viewports to contain too much content beyond the screen size, then using SingleChildScrollView will be very expensive (poor performance), and you should use scrollable components that support Sliver deferred loading, such as ListView.

Example:

Here is an example of displaying the capital letter Amurz vertically, because the vertical space exceeds the height of the on-screen viewport, so we use SingleChildScrollView:

Class SingleChildScrollViewTestRoute extends StatelessWidget {@ override Widget build (BuildContext context) {String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" Return Scrollbar (/ / display progress bar child: SingleChildScrollView (padding: EdgeInsets.all), child: Center (child: Column (/ / dynamically create a List children: str.split (") / / each letter is displayed with a Text The font is twice the original .map ((c) = > Text (c, textScaleFactor: 2.0,)) .toList (),) }}

The running effect is as shown in the figure:

These are all the contents of the article "how to use Flutter's SingleChildScrollView". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.