欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-11-14 14:01:46
pageview 是一个滑动视图列表,它也是继承至 customscrollview 的。 在 pageview 里有三个构造函数: pageview -...

pageview 是一个滑动视图列表,它也是继承至 customscrollview 的。

在 pageview 里有三个构造函数:

  • pageview - 创建一个可滚动列表。
  • pageview.builder - 创建一个滚动列表,指定数量。
  • pageview.custom - 创建一个可滚动的列表,自定义子项。

效果

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

代码

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

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