flutter PageView怎樣實(shí)現(xiàn)左右滑動(dòng)切換視圖

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

為大家分享了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)注億速云行業(yè)資訊頻道，感謝各位的閱讀！