Flutter开发之PageView指示器（31）

移动开发中圆点指示器给用户很好的用户体验，iOS 有自己的控件UIPageControl 方便快捷实现。既然想用Flutter代替，就想着如何实现UIPageControl 类似的功能。这篇文章就在前辈的基础上，实战一下PageView指示器。来实现圆点指示器的功能。（文章结尾会贴上参考的文章）

先看一下效果

完整代码：


import 'dart:math';
import 'package:flutter/material.dart';class PageControlTest extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(title: new Text('DemoList'),),body: new MyHomePage(),);}
}/// 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 PageControllerfinal int itemCount;/// Called when a dot is tappedfinal ValueChanged<int> onPageSelected;/// The color of the dots.////// Defaults to `Colors.white`.final Color color;// The base size of the dotsstatic const double _kDotSize = 8.0;// The increase in the size of the selected dotstatic const double _kMaxZoom = 2.0;// The distance between the center of each dotstatic const double _kDotSpacing = 25.0;Widget _buildDot(int index,int pageCount) {// 当前位置double currentPosition =((controller.page ?? controller.initialPage.toDouble()) %pageCount.toDouble());// 计算变化曲线double selectedness = Curves.easeOut.transform(max(0.0,1.0 - (currentPosition - index).abs(),),);// 从0点跳到最后一个时状态需要特殊处理if (currentPosition > pageCount - 1 && index == 0) {selectedness = 1 - (pageCount.toDouble() - currentPosition);}print('selectedness $index');print('selectedness $selectedness');print('selectedness $controller.page');print('selectedness $controller.initialPage');// 计算缩放大小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,(int index) {return _buildDot(index, itemCount);}),);}
}class MyHomePage extends StatefulWidget {@overrideState 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),),];@overrideWidget build(BuildContext context) {return new Scaffold(
//      appBar: new AppBar(
//        title: new Text('PageControl'),
//      ),body: Center(child: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,);},),),),),],),),));}
}

BannerGalleryInFlutter

这是一个多样化定制的轮播图，实现无限滑动Banner。

参考文章

Flutter pageview切换指示器
flutter PageView实现左右滑动切换视图

Flutter开发之PageView指示器（31）相关推荐

Flutter开发之ListView添加HeaderView和FooterView-2（39）
参考文章:RecyclerView添加HeaderView和FooterView 接着Flutter开发之ListView添加HeaderView和FooterView-1 继续研究. 通过Recyc ...
Flutter开发之AlertDialog、AboutDialog对话框组件-2（41）
继上一篇介绍了SimpleDialog对话框组件 Flutter开发之SimpleDialog对话框组件-1(40) 这里再介绍一种带有确定.取消按钮的对话框组件:AlertDialog.AboutD ...
Flutter开发之ListView使用第三方flutter_refresh加载更多（37）
在Flutter开发之ListView使用第三方pull_to_refresh加载更多(36) 中我们实现了下拉刷新.上拉分页加载的功能.今天介绍另一个ListView使用第三方flutter_ref ...
Flutter开发之ListView使用第三方pull_to_refresh加载更多（36）
在Flutter开发之ListView下拉刷新&上拉加载更多(35) 中我们实现了下拉刷新.上拉分页加载的功能.但是使用起来非常不方便,且不满一屏时难以处理. 今天介绍ListView使用第三 ...
Flutter开发之ListView下拉刷新上拉加载更多（35）
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
Flutter开发之iOS后台定位开发详解
Flutter开发之iOS后台定位开发详解需求目的开发一个功能持续获取用户的位置发送给后端,PC端会根据后端传来的移动端发送的位置信息,来绘制使用者的运动轨迹. 实现需求是否实现后台定位 ✅ ...
Flutter开发之Input-TextField-文本输入框（45)
之前介绍了一些基础控件,回头来看遗漏了一些基础的控件的用法.TextField 是最常用的文本输入widget.今天就来学习使用一下. 参看: Flutter组件-Input-TextField-文本 ...
Flutter开发之BottomSheetDialog选择组件-5（44）
BottomSheetDialog.ModalBottomSheetDialog同样也是需要借助showDialog唤起,就跟它名字一样,这两种dialog是从屏幕下方向上弹出的,不同的是Bottom ...
Flutter开发之SnackBar提示组件-4（43）
SnackBar无论是用法还是功能使用几乎都跟原生Android一样 ,唯一有一点需要留意的是在Scaffold.of(context).showSnackBar()中传递的context必须不能是S ...

Flutter开发之PageView指示器（31）

先看一下效果

完整代码：

BannerGalleryInFlutter

参考文章

Flutter开发之PageView指示器（31）相关推荐

最新文章

热门文章