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

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

(0)

相关推荐

  • Flutter实现页面切换后保持原页面状态的3种方法

    前言: 在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,并且带来了不好的用户体验. 在正文之前,先看一些常见的App导航,以喜马拉雅FM为例: 它拥有一个固定的底部导航以及首页的顶部导航,可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面,之前的页面状态都是始终维持的,下面就具体介绍下如何在flutter中实现类似喜马拉雅的导航效果 第一步:实

  • Flutter UI如何使用Provide实现主题切换详解

    背景 provide是谷歌官方出品的一个状态管理框架flutter-provide,它允许在小部件树中传递数据,它被设计为ScopedModel的替代品,允许我们更加灵活地处理数据类型和数据 为什么需要状态管理 在进行项目的开发时,我们往往需要管理不同页面之间的数据共享,在页面功能复杂,状态达到几十个上百个的时候,我们会难以清楚的维护我们的数据状态,本文将以主题切换这个功能使用状态管理来讲解如何在Flutter中使用provide这个状态管理框架 为什么选择Provide 一开始项目使用的是Sc

  • Flutter自定义实现神奇动效的卡片切换视图的示例代码

    前言 这一段时间,Flutter的势头是越来越猛了,作为一个Android程序猿,我自然也是想要赶紧尝试一把.在学习到动画的这部分后,为了加深对Flutter动画实现的理解,我决定把之前写的一个卡片切换效果的开源小项目,用Flutter"翻译"一遍. 废话不多说,先来看看效果吧: Android iOS Github地址:https://github.com/BakerJQ/Flutter-InfiniteCards 思路 首先,关于卡片的层叠效果,在原Android项目中,是通过Sc

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

    PageView 是一个滑动视图列表,它也是继承至 CustomScrollView 的. 在 PageView 里有三个构造函数: PageView - 创建一个可滚动列表. PageView.builder - 创建一个滚动列表,指定数量. PageView.custom - 创建一个可滚动的列表,自定义子项. 效果 代码 // Copyright 2017, the Flutter project authors. Please see the AUTHORS file // for de

  • flutter PageView实现左右滑动切换视图

    本文实例为大家分享了flutter PageView左右滑动切换视图的具体代码,供大家参考,具体内容如下 import 'dart:math'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_x/base/

  • Flutter实现切换应用时隐藏应用预览

    如果您要显示敏感数据,例如.钱包金额,或者只是当登录表单显示插入的密码清晰时(想想眼睛图标..),当您不在应用程序中时,您必须隐藏敏感数据. 许多应用程序已经这样做了,无论是在 Android 还是 iOS 上. 今天我们将看看如何在不使用任何包的情况下完成这项任务,并自己编写所有代码.别担心,这很容易. 因此,请继续了解当您从一个应用切换到另一个应用时如何隐藏应用预览. 开始使用 现在,让我们开始编码吧! 创建一个新的基本 Flutter 应用程序.(我想你知道该怎么做^^). 安卓 在 An

  • flutter实现切换页面缓存

    本文实例为大家分享了flutter实现切换页面缓存的具体代码,供大家参考,具体内容如下 一.实现底部导航栏切换页面缓存 实现底部导航栏切换页面缓存需要在pubspc.yamal中导入proste_indexed_stack插件,这个插件可以实现懒加载,比起使用IndexedStack包裹body实现,性能更好. dependencies: #懒加载的层叠组件 proste_indexed_stack:  //不加版本号可获取最新版本 实现底部导航切换页面缓存只需将body用ProsteIndex

  • 一段时间以后切换显示的广告代码 原创

    先显示广告a,一段时间以后显示广告代码b,然后就一直显示广告b 一段时间以后切换的广告显示代码 a部分内容 b部分内容 var s=5000; //5000毫秒就是5秒 function showb(){ document.getElementById('a').style.display='none'; document.getElementById('b').style.display='block'; } window.setInterval("showb()",s) [Ctrl

  • animate 实现滑动切换效果【实例代码】

    今天和大家分享一下用 animate 实现滑动切换效果的小例子 大家都知道jQuery 提供的有一下几种方法能够实现滑动效果: 1.slideDown() 2.slideUp() 3.slideToggle() 但是以上的滑动不太方便控制其滑动的方向,所以我们还是自己动手写一个吧... 其代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equ

  • js实现TAB切换对应不同颜色的代码

    本文实例讲述了js实现TAB切换对应不同颜色的代码.分享给大家供大家参考.具体如下: 这是一个个性化的TAB菜单,每个TAB卡片的背景颜色都不相同,鼠标点击上部的TAB,在主体内容区可看到颜色的变化. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cha-tab-color-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN

  • Flutter调用Android和iOS原生代码的方法示例

    前言 本文主要给大家介绍了关于Flutter调用Android和iOS原生代码的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 分3个大步骤: 1.在flutter中调用原生方法 2.在Android中实现被调用的方法 3.在iOS中实现被调用的方法 在flutter中调用原生方法 场景,这里你希望调用原生方法告诉你一个bool值,这个值的意义你可以随意定,这里表示的意义是是否是中国用户. 你可以在flutter中设计好要调用的方法名称,这里就叫 isChinese 请

  • vue中选项卡点击切换且能滑动切换功能的实现代码

    具体代码如下所述: <div> <div class="navlist"> <ul> <li class="navli" v-for="(item,index) in navList" :class="{'activeT':nowIndex===index}" @click="tabClick(index)"><i>{{item.name}}<

  • 微信小程序 点击切换样式scroll-view实现代码实例

    这篇文章主要介绍了微信小程序 点击切换样式scroll-view实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 scroll-view滚动视图点击切换样式 *.wxml <view class="content"> <view class="navbg"> <view class="nav"> <scroll-view class="

随机推荐