Flutter pageview切換指示器的實(shí)現(xiàn)代碼
PageView 是一個(gè)滑動(dòng)視圖列表,它也是繼承至 CustomScrollView 的。
在 PageView 里有三個(gè)構(gòu)造函數(shù):
- PageView - 創(chuàng)建一個(gè)可滾動(dòng)列表。
- PageView.builder - 創(chuàng)建一個(gè)滾動(dòng)列表,指定數(shù)量。
- PageView.custom - 創(chuàng)建一個(gè)可滾動(dòng)的列表,自定義子項(xià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 - 子項(xiàng)列表。
- controller → PageController - 控制臺(tái)。
- onPageChanged → ValueChanged - 索引改變時(shí)觸發(fā)。
- pageSnapping → bool - 設(shè)置為 false 以禁用頁(yè)面捕捉,對(duì)自定義滾動(dòng)行為很有用。
- physics → ScrollPhysics - 頁(yè)面視圖如何響應(yīng)用戶輸入,即滾動(dòng)的動(dòng)畫表現(xiàn)。
- reverse → bool - 是否反方向。
- scrollDirection → Axis - 視圖滾動(dòng)的方向。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android自定義View實(shí)現(xiàn)拖動(dòng)自動(dòng)吸邊效果
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)拖動(dòng)自動(dòng)吸邊效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06Android?Studio中如何修改APP圖標(biāo)和APP名稱
這篇文章主要介紹了Android?Studio中如何修改APP圖標(biāo)和APP名稱,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-11-11詳解Android的內(nèi)存優(yōu)化--LruCache
LruCache是基于Lru算法實(shí)現(xiàn)的一種緩存機(jī)制。本文對(duì)LruCache的概念和實(shí)現(xiàn)原理進(jìn)行介紹,通過(guò)實(shí)例分析和使用介紹,讓大家更好的了解LruCache,下面跟著小編一起來(lái)看下吧2016-12-12Android實(shí)現(xiàn)后臺(tái)開啟服務(wù)默默拍照功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)后臺(tái)開啟服務(wù)默默拍照功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-06-06Android開發(fā)之開發(fā)者頭條(一)啟動(dòng)頁(yè)實(shí)現(xiàn)
這篇文章主要介紹了Android開發(fā)之開發(fā)者頭條(一)啟動(dòng)頁(yè)實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2016-04-04Android入門之使用SimpleAdapter實(shí)現(xiàn)復(fù)雜界面布局
這篇文章主要為大家詳細(xì)介紹了Android如何使用SimpleAdapter實(shí)現(xiàn)復(fù)雜的界面布局,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)Android有一定的幫助,需要的可以參考一下2022-11-11教你一步步實(shí)現(xiàn)Android微信自動(dòng)搶紅包
自從微信添加搶紅包的功能,微信的電商之旅算是正式開始正式火爆起來(lái)。但是作為Android開發(fā)者來(lái)說(shuō),我們首先考慮的是如何實(shí)現(xiàn)Android微信自動(dòng)搶紅包呢,下面我們來(lái)一起看看吧。2016-08-08