当前位置： 移动技术网 > IT编程>移动开发>Android > flutter PageView实现左右滑动切换视图

flutter PageView实现左右滑动切换视图

2019年09月06日  | 移动技术网IT编程  | 我要评论

vray,南京一夜情,判女

本文实例为大家分享了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<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即层叠布局控件，能够将子控件层叠排列
     //alignment：此参数决定如何去对齐没有定位（没有使用positioned）或部分定位的子widget。所谓部分定位，在这里特指没有在某一个轴上定位：left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。
     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("立即体验")) ,
       ),
      ),
     ],
    )),
 ];

 @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];
     },
     //条目个数
     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<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),
  );
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网