Flutter滾動組件之SingleChildScrollView使用詳解
SingleChildScrollView
SingleChildScrollView類似于Android中的ScrollView,它只能接收一個子組件。定義如下:
const SingleChildScrollView({
? ? Key key,
? ? this.scrollDirection = Axis.vertical,
? ? // 是否按照閱讀方向相反的方向滑動,如:scrollDirection值為Axis.horizontal,如果閱讀方向是從左到右(取決于語言環(huán)境,阿拉伯語就是從右到左)。
? ? // reverse為true時,那么滑動方向就是從右往左。其實此屬性本質上是決定可滾動組件的初始滾動位置是在“頭”還是“尾”,取false時,初始滾動位置在“頭”,反之則在“尾”。
? ? this.reverse = false,
? ? this.padding,
? ? // 指是否使用widget樹中默認的PrimaryScrollController;當滑動方向為垂直方向(scrollDirection值為Axis.vertical)并且沒有指定controller時,primary默認為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);除了在簡介我們介紹過的可滾動組件的通用屬性外,我們重點看一下reverse和primary兩個屬性:
- reverse:該屬性API文檔解釋是:是否按照閱讀方向相反的方向滑動,如:scrollDirection值為Axis.horizontal,如果閱讀方向是從左到右(取決于語言環(huán)境,阿拉伯語就是從右到左)。reverse為true時,那么滑動方向就是從右往左。其實此屬性本質上是決定可滾動組件的初始滾動位置是在“頭”還是“尾”,取false時,初始滾動位置在“頭”,反之則在“尾”,可以自己試驗。
- primary:指是否使用widget樹中默認的PrimaryScrollController;當滑動方向為垂直方向(scrollDirection值為Axis.vertical)并且沒有指定controller時,primary默認為true
需要注意的是,通常SingleChildScrollView只應在期望的內容不會超過屏幕太多時使用,這是因為SingleChildScrollView不支持基于Sliver的延遲實例化模型,所以如果預計視口可能包含超出屏幕尺寸太多的內容時,那么使用SingleChildScrollView將會非常昂貴(性能差),此時應該使用一些支持Sliver延遲加載的可滾動組件,如ListView。
示例:
下面是一個將大寫字母A-Z沿垂直方向顯示的例子,由于垂直方向空間會超過屏幕視口高度,所以我們使用SingleChildScrollView:
class SingleChildScrollViewTestRoute extends StatelessWidget {
? @override
? Widget build(BuildContext context) {
? ? String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
? ? return Scrollbar( // 顯示進度條
? ? ? child: SingleChildScrollView(
? ? ? ? padding: EdgeInsets.all(16.0),
? ? ? ? child: Center(
? ? ? ? ? child: Column(?
? ? ? ? ? ? //動態(tài)創(chuàng)建一個List<Widget> ?
? ? ? ? ? ? children: str.split("")?
? ? ? ? ? ? ? ? //每一個字母都用一個Text顯示,字體為原來的兩倍
? ? ? ? ? ? ? ? .map((c) => Text(c, textScaleFactor: 2.0,))?
? ? ? ? ? ? ? ? .toList(),
? ? ? ? ? ),
? ? ? ? ),
? ? ? ),
? ? );
? }
}運行效果如圖:

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Android最新版本開發(fā)環(huán)境搭建圖文教程
這篇文章主要為大家詳細介紹了Android最新版本開發(fā)環(huán)境搭建圖文教程,重點在于配置JDK,以及adt-bundle,感興趣的小伙伴們可以參考一下2016-07-07
教你制作Android中炫酷的ViewPagerIndicator(不僅仿MIUI)
ViewPagerIndicator作為一款分頁指標小部件兼容ViewPager,封裝上做得非常不錯,目前已為眾多知名應用所使用。今天給你大家分享一個炫酷的效果,有需要的可以參考學習。2016-08-08
Android Studio配置Kotlin開發(fā)環(huán)境詳細步驟
這篇文章主要介紹了Android Studio配置Kotlin開發(fā)環(huán)境詳細步驟的相關資料,需要的朋友可以參考下2017-05-05
Android自定義RecyclerView Item頭部懸浮吸頂
這篇文章主要為大家詳細介紹了Android自定義RecyclerView Item頭部懸浮吸頂,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08

