Flutter开发--------PageView讲解

前言

之前没有怎么研究PageView这个组件,这三天因为工作需求,所以接触到这个组件中,有了深刻的认识,所以打算记录一下并且和大家分享一下

实现效果

1.类似于微信Android机左右滑切换页面,效果如下图所示
2.是动态加载页面

在这里插入图片描述

实例代码分析

1.PageView本身就可以实现上图所示的效果

2.动态加载加载页面的代码

核心代码

 List activityItem=[1,2,3,4,5,6,7,8,9,10];					//以后这个就可以替换成后端返回的json
	
  
  Widget _pageItemBuilder(context,index){
    return IndexPage(isNew: index,);						//IndexPage()就是我们的模板
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      itemCount: activityItem.length,
      itemBuilder: _pageItemBuilder,
    );
  }

全部代码

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import './index_page.dart';



class viewPage extends StatefulWidget {
  @override
  _viewPageState createState() => _viewPageState();
}

class _viewPageState extends State<viewPage> {

  List activityItem=[1,2,3,4,5,6,7,8,9,10];

  
  Widget _pageItemBuilder(context,index){
    return IndexPage(isNew: index,);
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      itemCount: activityItem.length,
      itemBuilder: _pageItemBuilder,
    );
  }
}

这篇博客就先分享到这里,后续会持续的补充

发布了50 篇原创文章 · 获赞 35 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/qq_35905501/article/details/94736139