欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-07-06 14:34:15
本文实例为大家分享了flutter pageview左右滑动切换视图的具体代码,供大家参考,具体内容如下 import 'dart:math'; imp...

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

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),
  );
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。