Element 系列组件之 EPageView 组件

老孟Flutter

共 3204字,需浏览 7分钟

 ·

2022-01-15 15:24


介绍

「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';

用法

构建统一的 「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),
  ),
)



关注「老孟Flutter」
让你每天进步一点点
浏览 17
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报