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

时间:2021-05-20

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

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章