flutter PageView實(shí)現(xiàn)左右滑動(dòng)切換視圖
本文實(shí)例為大家分享了flutter PageView左右滑動(dòng)切換視圖的具體代碼,供大家參考,具體內(nèi)容如下
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/base_appbar_page.dart'; class LeftPageViewPage extends StatefulWidget { @override State<StatefulWidget> createState() { return new LeftPageViewPageState(); } } class LeftPageViewPageState extends BaseAppBarPageState<LeftPageViewPage> { @override String buildInitState() { buildBackBar("pageView", backIcon: Icons.arrow_back_ios); return null; } final _controller = new PageController(); static const _kDuration = const Duration(milliseconds: 300); static const _kCurve = Curves.ease; final List<Widget> _pages = <Widget>[ new ConstrainedBox( constraints: const BoxConstraints.expand(), child: new CachedNetworkImage( width: double.infinity, height: double.infinity, fit: BoxFit.fill, imageUrl: "http://b-ssl.duitang.com/uploads/item/201311/02/20131102150044_YGB5u.jpeg", placeholder: (context, url) => new SizedBox( width: 24.0, height: 24.0, child: new CircularProgressIndicator( strokeWidth: 2.0, ), ), errorWidget: (context, url, error) => new Icon(Icons.error), ), ), new ConstrainedBox( constraints: const BoxConstraints.expand(), child: new CachedNetworkImage( width: double.infinity, height: double.infinity, fit: BoxFit.fill, imageUrl: "http://b-ssl.duitang.com/uploads/item/201311/02/20131102150044_YGB5u.jpeg", placeholder: (context, url) => new SizedBox( width: 24.0, height: 24.0, child: new CircularProgressIndicator( strokeWidth: 2.0, ), ), errorWidget: (context, url, error) => new Icon(Icons.error), ), ), new ConstrainedBox( constraints: const BoxConstraints.expand(), child: new Stack( //Stack即層疊布局控件,能夠?qū)⒆涌丶盈B排列 //alignment:此參數(shù)決定如何去對(duì)齊沒(méi)有定位(沒(méi)有使用Positioned)或部分定位的子widget。所謂部分定位,在這里特指沒(méi)有在某一個(gè)軸上定位:left、right為橫軸,top、bottom為縱軸,只要包含某個(gè)軸上的一個(gè)定位屬性就算在該軸上有定位。 alignment: AlignmentDirectional.topStart, children: <Widget>[ new CachedNetworkImage( width: double.infinity, height: double.infinity, fit: BoxFit.fill, imageUrl: "http://b-ssl.duitang.com/uploads/item/201311/02/20131102150044_YGB5u.jpeg", placeholder: (context, url) => SizedBox(width: 24,height: 25,child: CircularProgressIndicator(strokeWidth: 2.0,),), errorWidget: (context, url, error) => new Icon(Icons.error), ), new Align( alignment: Alignment.bottomCenter, child: new Container( margin: EdgeInsets.only(bottom: 80.0), child: FlatButton(onPressed: (){}, child: Text("立即體驗(yàn)")) , ), ), ], )), ]; @override Widget buildWidget(BuildContext context) { // TODO: implement buildWidget return new Stack( children: <Widget>[ //pageViw PageView.builder( physics: new AlwaysScrollableScrollPhysics(), controller: _controller, itemBuilder: (BuildContext context, int index) { return _pages[index]; }, //條目個(gè)數(shù) itemCount: _pages.length, ), //圓點(diǎn)指示器 new Positioned( bottom: 0.0, left: 0.0, right: 0.0, child: new Container( color: Colors.white, 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, ); }), ), ), ), ], ); } } class DotsIndicator extends AnimatedWidget { DotsIndicator({ this.controller, this.itemCount, this.onPageSelected, this.color: Colors.red, }) : 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), ); } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android點(diǎn)擊Button實(shí)現(xiàn)切換點(diǎn)擊圖片效果的示例
今天小編就為大家分享一篇關(guān)于Android點(diǎn)擊Button實(shí)現(xiàn)切換點(diǎn)擊圖片效果的示例,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-03-03Android自定義View繪制的方法及過(guò)程(二)
這篇文章主要解析了Android自定義View繪制的方法及過(guò)程,介紹了onSizeChanged、onDraw、onMeasure順序,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Android webview打開(kāi)本地圖片上傳實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Android webview打開(kāi)本地圖片上傳的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02flutter實(shí)現(xiàn)底部導(dǎo)航欄切換
這篇文章主要為大家詳細(xì)介紹了flutter實(shí)現(xiàn)底部導(dǎo)航欄切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07Android 開(kāi)發(fā)隱藏標(biāo)題欄的方法總結(jié)
這篇文章主要介紹了android 開(kāi)發(fā)隱藏標(biāo)題欄的方法總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04android編程實(shí)現(xiàn)的自定義注釋模板實(shí)例
這篇文章主要介紹了android編程實(shí)現(xiàn)的自定義注釋模板,以完整實(shí)例形式分析了Android自定義魔板的定義及具體實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2015-11-11android實(shí)現(xiàn)左右側(cè)滑菜單效果
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)左右側(cè)滑菜單效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10Android 防止多次重復(fù)點(diǎn)擊的三種方法的示例
本篇文章主要介紹了Android 防止多次重復(fù)點(diǎn)擊的三種方法的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03Android 使用Intent傳遞數(shù)據(jù)的實(shí)現(xiàn)思路與代碼
Intent是Android中一個(gè)非常重要的概念,跟這個(gè)詞的本意(意圖,目的)一樣,這個(gè)類在Android中的作用就是要調(diào)用某個(gè)組建去做某一件事,接下來(lái)詳細(xì)介紹,感興趣的朋友可以參考下2013-01-01