android切换指示器,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 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.generate(itemCount, _buildDot),

);

}

}

class MyHomePage extends StatefulWidget {

@override

State createState() => new MyHomePageState();

}

class MyHomePageState extends State {

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 _pages = [

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: [

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

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