Flutter pageview切换指示器的实现代码
程序员文章站
2023-11-14 14:01:46
pageview 是一个滑动视图列表,它也是继承至 customscrollview 的。
在 pageview 里有三个构造函数:
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 - 视图滚动的方向。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: .NET工厂方法模式讲解