android切换指示器,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 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.generate(itemcount, _builddot),

);

}

}

class myhomepage extends statefulwidget {

@override

state createstate() => new myhomepagestate();

}

class myhomepagestate extends state {

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 _pages = [

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: [

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 - 视图滚动的方向。

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