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 - 视图滚动的方向。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。