Flutter pageview切换指示器的实现代码

pageview 是一个滑动视图列表，它也是继承至 customscrollview 的。

在 pageview 里有三个构造函数：

• pageview - 创建一个可滚动列表。
• pageview.builder - 创建一个滚动列表，指定数量。
• pageview.custom - 创建一个可滚动的列表，自定义子项。

效果

代码

// copyright 2017, the flutter project authors. please see the authors file
// for details. all rights reserved. use of this source code is governed by a
// bsd-style license that can be found in the license file.

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
 runapp(new myapp());
}

class myapp extends statelesswidget {
 @override
 widget build(buildcontext context) {
  return new materialapp(
   title: 'flutter demo',
   home: new myhomepage(),
   debugshowcheckedmodebanner: false,
  );
 }
}

/// an indicator showing the currently selected page of a pagecontroller
class dotsindicator extends animatedwidget {
 dotsindicator({
  this.controller,
  this.itemcount,
  this.onpageselected,
  this.color: colors.white,
 }) : super(listenable: controller);

 /// the pagecontroller that this dotsindicator is representing.
 final pagecontroller controller;

 /// the number of items managed by the pagecontroller
 final int itemcount;

 /// called when a dot is tapped
 final valuechanged<int> onpageselected;

 /// the color of the dots.
 ///
 /// defaults to `colors.white`.
 final color color;

 // the base size of the dots
 static const double _kdotsize = 8.0;

 // the increase in the size of the selected dot
 static const double _kmaxzoom = 2.0;

 // the distance between the center of each dot
 static const double _kdotspacing = 25.0;

 widget _builddot(int index) {
  double selectedness = curves.easeout.transform(
   max(
    0.0,
    1.0 - ((controller.page ?? controller.initialpage) - index).abs(),
   ),
  );
  double zoom = 1.0 + (_kmaxzoom - 1.0) * selectedness;
  return new container(
   width: _kdotspacing,
   child: new center(
    child: new material(
     color: color,
     type: materialtype.circle,
     child: new container(
      width: _kdotsize * zoom,
      height: _kdotsize * zoom,
      child: new inkwell(
       ontap: () => onpageselected(index),
      ),
     ),
    ),
   ),
  );
 }

 widget build(buildcontext context) {
  return new row(
   mainaxisalignment: mainaxisalignment.center,
   children: new list<widget>.generate(itemcount, _builddot),
  );
 }
}

class myhomepage extends statefulwidget {
 @override
 state createstate() => new myhomepagestate();
}

class myhomepagestate extends state<myhomepage> {

 final _controller = new pagecontroller();

 static const _kduration = const duration(milliseconds: 300);

 static const _kcurve = curves.ease;

 final _karrowcolor = colors.black.withopacity(0.8);

 final list<widget> _pages = <widget>[
  new constrainedbox(
   constraints: const boxconstraints.expand(),
   child: new flutterlogo(colors: colors.blue),
  ),
  new constrainedbox(
   constraints: const boxconstraints.expand(),
   child: new flutterlogo(style: flutterlogostyle.stacked, colors: colors.red),
  ),
  new constrainedbox(
   constraints: const boxconstraints.expand(),
   child: new flutterlogo(style: flutterlogostyle.horizontal, colors: colors.green),
  ),
 ];

 @override
 widget build(buildcontext context) {
  return new scaffold(
   body: new icontheme(
    data: new iconthemedata(color: _karrowcolor),
    child: new stack(
     children: <widget>[
      new pageview.builder(
       physics: new alwaysscrollablescrollphysics(),
       controller: _controller,
       itembuilder: (buildcontext context, int index) {
        return _pages[index % _pages.length];
       },
      ),
      new positioned(
       bottom: 0.0,
       left: 0.0,
       right: 0.0,
       child: new container(
        color: colors.grey[800].withopacity(0.5),
        padding: const edgeinsets.all(20.0),
        child: new center(
         child: new dotsindicator(
          controller: _controller,
          itemcount: _pages.length,
          onpageselected: (int page) {
           _controller.animatetopage(
            page,
            duration: _kduration,
            curve: _kcurve,
           );
          },
         ),
        ),
       ),
      ),
     ],
    ),
   ),
  );
 }
}

pageview 有以下常用属性：

• childrendelegate → sliverchilddelegate - 子项列表。
• controller → pagecontroller - 控制台。
• onpagechanged → valuechanged - 索引改变时触发。
• pagesnapping → bool - 设置为 false 以禁用页面捕捉，对自定义滚动行为很有用。
• physics → scrollphysics - 页面视图如何响应用户输入，即滚动的动画表现。
• reverse → bool - 是否反方向。
• scrolldirection → axis - 视图滚动的方向。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。