Element 系列组件之 EPageView 组件
老孟Flutter
共 3204字,需浏览 7分钟
·
2022-01-15 15:24
介绍
「EPageView」 组件是 「Flutter Element」 组件系列中的 “横幅” 组件。
引入
在 「pubspec.yaml」 中依赖
element_ui: ^lastversion
最新的版本到pub上查看,pub地址:https://pub.dev/packages/element_ui
import
import 'package:element_ui/widgets.dart';
用法
构建统一的 「itemBuilder」,下面的例子统一使用这个「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),
),
);
};
基础用法:
EPageView(
itemBuilder: itemBuilder,
itemCount: 5,
)
「scrollDirection」:设置滚动方向,默认水平。
设置为垂直:
EPageView(
itemBuilder: itemBuilder,
itemCount: 5,
scrollDirection: Axis.vertical,
)
「type」:设置卡片的类型。
「normal」:默认样式,填充item。 「card」:卡片样式。通常与 「viewportFraction」 和 「cardScale」 配合使用。
「viewportFraction」:每个页面应占据的视口比例。
「cardScale」:每个页面缩放的比例。
EPageView(
itemBuilder: itemBuilder,
itemCount: 5,
type: PageViewType.card,
viewportFraction: .8,
cardScale: .9,
)
「loop」:无限循环。
EPageView(
itemBuilder: itemBuilder,
itemCount: 5,
loop: true,
)
滑动到最后一个的时候,下一个从第一个开始。
「autoPlay」:自动滚动。
EPageView(
itemBuilder: itemBuilder,
itemCount: 5,
autoPlay: true,
loop: true,
)
「autoPlayDuration」:切换页面的间隔,默认3秒。
「nextPageDuration」:当前页面开始切换到下一个页面的(动画)时常,默认300毫秒。
EPageView(
itemBuilder: itemBuilder,
itemCount: 5,
autoPlay: true,
loop: true,
autoPlayDuration: Duration(seconds: 2),
nextPageDuration: Duration(microseconds: 800),
)
「showIndicator」: 显示指示器,当前页面的指示器默认颜色为 「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」:内部。 「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」 :是否显示上/下一页,主要应用于宽屏应用,比如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),
),
)
评论