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

用法

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