flutterPageView怎樣實(shí)現(xiàn)左右滑動(dòng)切換視圖-創(chuàng)新互聯(lián)

flutter PageView怎樣實(shí)現(xiàn)左右滑動(dòng)切換視圖，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),博興企業(yè)網(wǎng)站建設(shè),博興品牌網(wǎng)站建設(shè),網(wǎng)站定制,博興網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,博興網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

為大家分享了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), ); }}

看完上述內(nèi)容，你們掌握f(shuō)lutter PageView怎樣實(shí)現(xiàn)左右滑動(dòng)切換視圖的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文標(biāo)題：flutterPageView怎樣實(shí)現(xiàn)左右滑動(dòng)切換視圖-創(chuàng)新互聯(lián)
分享路徑：http://muchs.cn/article26/dcpojg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、標(biāo)簽優(yōu)化、面包屑導(dǎo)航、定制網(wǎng)站、電子商務(wù)、網(wǎng)站排名

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容