Flutter pageview切換指示器的實現(xiàn)代碼
PageView 是一個滑動視圖列表,它也是繼承至 CustomScrollView 的。
在 PageView 里有三個構(gòu)造函數(shù):
- PageView - 創(chuàng)建一個可滾動列表。
- PageView.builder - 創(chuàng)建一個滾動列表,指定數(shù)量。
- PageView.custom - 創(chuàng)建一個可滾動的列表,自定義子項。
效果

代碼
// 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 - 索引改變時觸發(fā)。
- pageSnapping → bool - 設(shè)置為 false 以禁用頁面捕捉,對自定義滾動行為很有用。
- physics → ScrollPhysics - 頁面視圖如何響應(yīng)用戶輸入,即滾動的動畫表現(xiàn)。
- reverse → bool - 是否反方向。
- scrollDirection → Axis - 視圖滾動的方向。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android自定義TextView實現(xiàn)文字圖片居中顯示的方法
下面小編就為大家分享一篇Android自定義TextView實現(xiàn)文字圖片居中顯示的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
Android Studio實現(xiàn)登錄功能案例講解
這篇文章主要介紹了Android Studio實現(xiàn)登錄功能案例講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08
Android應(yīng)用圖標(biāo)在狀態(tài)欄上顯示實現(xiàn)原理
Android應(yīng)用圖標(biāo)在狀態(tài)欄上顯示,以及顯示不同的圖標(biāo),其實很研究完后,才發(fā)現(xiàn),很簡單,具體實現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06
詳解Android應(yīng)用main函數(shù)的調(diào)用
Android常識,App主線程初始化了Looper,調(diào)用prepare的地方是ActivityThread.main函數(shù)。問題來了,App的main函數(shù)在哪兒調(diào)用,下面我們來一起學(xué)習(xí)一下吧2019-06-06
Android 中利用 ksoap2 調(diào)用 WebService的示例代碼
這篇文章主要介紹了Android 中利用 ksoap2 調(diào)用 WebService的示例代碼,非常具有實用價值,需要的朋友可以參考下2017-09-09
android RecycleView實現(xiàn)多級樹形列表
這篇文章主要為大家詳細介紹了android RecycleView實現(xiàn)多級樹形列表,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-05-05
Android Framework Application Framework層簡單介紹
這篇文章主要介紹了 Android Framework Application Framework層簡單介紹的相關(guān)資料,需要的朋友可以參考下2016-11-11

