Element 系列組件之 EPageView 組件

介紹

「EPageView」 組件是 「Flutter Element」 組件系列中的 “橫幅” 組件。

引入

1. 在 「pubspec.yaml」 中依賴

   element_ui:?^lastversion
   

   最新的版本到pub上查看，pub地址：https://pub.dev/packages/element_ui

2. import

   import?'package:element_ui/widgets.dart';
   

用法

構(gòu)建統(tǒng)一的 「itemBuilder」，下面的例子統(tǒng)一使用這個「itemBuilder」。

var?itemBuilder?=?(context,?index)?{
??return?Container(
????color:?index?%?2?==?0???Color(0xFF99a9bf)?:?Color(0xFFd3dce6),
????alignment:?Alignment.center,
????child:?Text(
??????'PageView:$index',
??????style:?TextStyle(color:?Colors.white,?fontSize:?26),
????),
??);
};

基礎(chǔ)用法：

EPageView(
??itemBuilder:?itemBuilder,
??itemCount:?5,
)

「scrollDirection」：設(shè)置滾動方向，默認(rèn)水平。

設(shè)置為垂直：

EPageView(
??itemBuilder:?itemBuilder,
??itemCount:?5,
??scrollDirection:?Axis.vertical,
)

「type」：設(shè)置卡片的類型。

• 「normal」：默認(rèn)樣式，填充item。
• 「card」：卡片樣式。通常與 「viewportFraction」 和 「cardScale」 配合使用。

「viewportFraction」：每個頁面應(yīng)占據(jù)的視口比例。

「cardScale」：每個頁面縮放的比例。

EPageView(
??itemBuilder:?itemBuilder,
??itemCount:?5,
??type:?PageViewType.card,
??viewportFraction:?.8,
??cardScale:?.9,
)

「loop」：無限循環(huán)。

EPageView(
??itemBuilder:?itemBuilder,
??itemCount:?5,
??loop:?true,
)

滑動到最后一個的時候，下一個從第一個開始。

「autoPlay」：自動滾動。

EPageView(
??itemBuilder:?itemBuilder,
??itemCount:?5,
??autoPlay:?true,
??loop:?true,
)

「autoPlayDuration」：切換頁面的間隔，默認(rèn)3秒。

「nextPageDuration」：當(dāng)前頁面開始切換到下一個頁面的（動畫）時常，默認(rèn)300毫秒。

EPageView(
??itemBuilder:?itemBuilder,
??itemCount:?5,
??autoPlay:?true,
??loop:?true,
??autoPlayDuration:?Duration(seconds:?2),
??nextPageDuration:?Duration(microseconds:?800),
)

「showIndicator」: 顯示指示器，當(dāng)前頁面的指示器默認(rèn)顏色為 「EleTheme」 的主題色，其他的顏色為白色。

EPageView(
??itemBuilder:?itemBuilder,
??itemCount:?5,
??showIndicator:?true,
)

改變指示器的顏色：

EPageView(
??itemBuilder:?itemBuilder,
??itemCount:?5,
??showIndicator:?true,
??style:?EPageViewStyle(
????indicatorColor:?Colors.black,
????indicatorActiveColor:?Colors.red,
??),
)

「indicatorType」 ：指示器的類型。

• 「dot」：圓點。
• 「line」：直線。

EPageView(
??itemBuilder:?itemBuilder,
??itemCount:?5,
??showIndicator:?true,
??indicatorType:?PageViewIndicatorType.line,
)

「indicatorPosition」: 指示器的位置。

• 「inside」：內(nèi)部。
• 「outside」：外部。

Container(
??height:?200,
??color:?Colors.grey.withOpacity(.4),
??child:?EPageView(
????itemBuilder:?itemBuilder,
????itemCount:?5,
????showIndicator:?true,
????indicatorPosition:?PageViewIndicatorPosition.outside,
??),
)

垂直方向滾動，指示器的樣式：

EPageView(
??itemBuilder:?itemBuilder,
??itemCount:?5,
??showIndicator:?true,
??scrollDirection:?Axis.vertical,
)

EPageView(
??itemBuilder:?itemBuilder,
??itemCount:?5,
??showIndicator:?true,
??indicatorType:?PageViewIndicatorType.line,
??scrollDirection:?Axis.vertical,
)

Container(
??height:?200,
??color:?Colors.grey.withOpacity(.4),
??child:?EPageView(
????itemBuilder:?itemBuilder,
????itemCount:?5,
????showIndicator:?true,
????scrollDirection:?Axis.vertical,
????indicatorPosition:?PageViewIndicatorPosition.outside,
??),
)

「showControl」 ：是否顯示上/下一頁，主要應(yīng)用于寬屏應(yīng)用，比如Web端。

EPageView(
??itemBuilder:?itemBuilder,
??itemCount:?5,
??showControl:?true,
)

「nextWidget」: 自定義下一頁組件。

「previousWidget」：自定義上一頁組件。

EPageView(
??itemBuilder:?itemBuilder,
??itemCount:?5,
??showControl:?true,
??nextWidget:?Text(
????'下一頁',
????style:?TextStyle(color:?Colors.white),
??),
??previousWidget:?Text(
????'上一頁',
????style:?TextStyle(color:?Colors.white),
??),
)