快捷導(dǎo)航

Flutter滾動組件之SingleChildScrollView使用詳解

更新時(shí)間：2022年03月22日 15:16:30 作者：PuTTY本無樹

這篇文章主要為大家詳細(xì)介紹了Flutter滾動組件之SingleChildScrollView使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

SingleChildScrollView

SingleChildScrollView類似于Android中的ScrollView，它只能接收一個(gè)子組件。定義如下：

const SingleChildScrollView({
? ? Key key,
? ? this.scrollDirection = Axis.vertical,
? ? // 是否按照閱讀方向相反的方向滑動，如：scrollDirection值為Axis.horizontal，如果閱讀方向是從左到右(取決于語言環(huán)境，阿拉伯語就是從右到左)。
? ? // reverse為true時(shí)，那么滑動方向就是從右往左。其實(shí)此屬性本質(zhì)上是決定可滾動組件的初始滾動位置是在“頭”還是“尾”，取false時(shí)，初始滾動位置在“頭”，反之則在“尾”。
? ? this.reverse = false,
? ? this.padding,
? ? // 指是否使用widget樹中默認(rèn)的PrimaryScrollController；當(dāng)滑動方向?yàn)榇怪狈较颍╯crollDirection值為Axis.vertical）并且沒有指定controller時(shí)，primary默認(rèn)為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);

除了在簡介我們介紹過的可滾動組件的通用屬性外，我們重點(diǎn)看一下reverse和primary兩個(gè)屬性：

reverse：該屬性API文檔解釋是：是否按照閱讀方向相反的方向滑動，如：scrollDirection值為Axis.horizontal，如果閱讀方向是從左到右(取決于語言環(huán)境，阿拉伯語就是從右到左)。reverse為true時(shí)，那么滑動方向就是從右往左。其實(shí)此屬性本質(zhì)上是決定可滾動組件的初始滾動位置是在“頭”還是“尾”，取false時(shí)，初始滾動位置在“頭”，反之則在“尾”，可以自己試驗(yàn)。
primary：指是否使用widget樹中默認(rèn)的PrimaryScrollController；當(dāng)滑動方向?yàn)榇怪狈较颍╯crollDirection值為Axis.vertical）并且沒有指定controller時(shí)，primary默認(rèn)為true

需要注意的是，通常SingleChildScrollView只應(yīng)在期望的內(nèi)容不會超過屏幕太多時(shí)使用，這是因?yàn)镾ingleChildScrollView不支持基于Sliver的延遲實(shí)例化模型，所以如果預(yù)計(jì)視口可能包含超出屏幕尺寸太多的內(nèi)容時(shí)，那么使用SingleChildScrollView將會非常昂貴（性能差），此時(shí)應(yīng)該使用一些支持Sliver延遲加載的可滾動組件，如ListView。

示例：

下面是一個(gè)將大寫字母A-Z沿垂直方向顯示的例子，由于垂直方向空間會超過屏幕視口高度，所以我們使用SingleChildScrollView：

class SingleChildScrollViewTestRoute extends StatelessWidget {
? @override
? Widget build(BuildContext context) {
? ? String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
? ? return Scrollbar( // 顯示進(jìn)度條
? ? ? child: SingleChildScrollView(
? ? ? ? padding: EdgeInsets.all(16.0),
? ? ? ? child: Center(
? ? ? ? ? child: Column(?
? ? ? ? ? ? //動態(tài)創(chuàng)建一個(gè)List<Widget> ?
? ? ? ? ? ? children: str.split("")?
? ? ? ? ? ? ? ? //每一個(gè)字母都用一個(gè)Text顯示,字體為原來的兩倍
? ? ? ? ? ? ? ? .map((c) => Text(c, textScaleFactor: 2.0,))?
? ? ? ? ? ? ? ? .toList(),
? ? ? ? ? ),
? ? ? ? ),
? ? ? ),
? ? );
? }
}

運(yùn)行效果如圖：