flutter PageView上下滑动切换视图

Flutter项目开发全套教程 专栏收录该内容
187 篇文章 61 订阅

上下滑动切换的 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';
import 'package:flutter_x/base/base_page.dart';
import 'package:flutter_x/common/common_colors.dart';
import 'package:flutter_x/utils/route_utils.dart';
import 'package:webview_flutter/webview_flutter.dart';

class UpPageViewPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new UpPageViewPageState();
  }
}

class UpPageViewPageState extends BaseAppBarPageState<UpPageViewPage> {
  @override
  String buildInitState() {
    buildBackBar("pageView", backIcon: Icons.arrow_back_ios);
    return null;
  }

  final _controller = new PageController();
  @override
  Widget buildWidget(BuildContext context) {
    // TODO: implement buildWidget
    return Container(
      child: PageView(
        children: buildPageItemView(),
        //设置滑动方向
        scrollDirection: Axis.vertical,
      ),
    );
  }

  buildPageItemView() {
    List<Widget> _pages =new List();
    for(int i=0;i<100;i++){
     Widget item = 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),
        ),
      );
     _pages.add(item);
    }
    return _pages;
  }
}

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值