flutter PageView怎样实现左右滑动切换视图
创始人
2024-12-22 02:01:28
0次

为大家分享了flutter PageView左右滑动切换视图的具体代码,供大家参考,具体内容如下

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 createState() {  return new LeftPageViewPageState(); }}class LeftPageViewPageState extends BaseAppBarPageState { @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 _pages = [  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即层叠布局控件,能够将子控件层叠排列     //alignment:此参数决定如何去对齐没有定位(没有使用Positioned)或部分定位的子widget。所谓部分定位,在这里特指没有在某一个轴上定位:left、right为横轴,top、bottom为纵轴,只要包含某个轴上的一个定位属性就算在该轴上有定位。     alignment: AlignmentDirectional.topStart,     children: [      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("立即体验")) ,       ),      ),     ],    )), ]; @override Widget buildWidget(BuildContext context) {  // TODO: implement buildWidget  return new Stack(   children: [    //pageViw    PageView.builder(     physics: new AlwaysScrollableScrollPhysics(),     controller: _controller,     itemBuilder: (BuildContext context, int index) {      return _pages[index];     },     //条目个数     itemCount: _pages.length,    ),    //圆点指示器    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 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.generate(itemCount, _buildDot),  ); }}

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...