zoukankan      html  css  js  c++  java
  • Flutter中的可滚动列表组件-PageView

    PageVIew,可滚动的视图列表组件,而且每一个子组件的大小都和视图窗口大小一样。

    属性:

    • controller -> PageController 用于控制视图页面滚动到的位置
    • children 视图页面列表
    • scrollDirection 页面滚动的方向,从左往右,或者从上往下
    • onPageChanged 视图页面发生转换的时候进行的函数操作
    • reverse 对视图页面的排列顺序进行反转

    效果:

    PageView的用法

    在项目的main.dart中的代码:

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.pink,
          ),
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Demo Code',style: TextStyle(color: Colors.white),),
            centerTitle: true,
          ),
          body: Container(
            height: 500.0,//确保pageview的高度
            child: PageView(
              controller: PageController(
                initialPage: 0,//让初始页为第一个pageview的实例
                viewportFraction: 1.0//让页面视图充满整个视图窗口 即充满400px高的视图窗口
              ),
              children: <Widget>[
                Container(
                  color: Colors.yellow,
                  child: Center(
                    child: Text('这是第一个pageView的实例',style: TextStyle(color: Colors.white,fontSize: 20.0),),
                  ),
                ),
                Container(
                  color: Colors.red,
                  child: Center(
                    child: Text('这是第二个pageView的实例',style: TextStyle(color: Colors.white,fontSize: 20.0),),
                  ),
                ),
                Container(
                  color: Colors.green,
                  child: Center(
                    child: Text('这是第三个pageView的实例',style: TextStyle(color: Colors.white,fontSize: 20.0),),
                  ),
                )
              ],
              scrollDirection: Axis.vertical,//上下滚动
              onPageChanged: (int index) {
                print('这是第${index}个页面');
              },
              reverse: false,//是否反转页面的顺序
            ),
          ),
        );
      }
    }

     如果container的高度500没有设置的话,每个页面的大小将是手机的可视高度。

    如果controller中的initialPage设置为1,则当前显示的页面时第二个页面

    viewprotFraction的默认值为1.0,表示页面视图充满整个父容器。若是0.5,则页面视图的高度是父容器高度的一半。

  • 相关阅读:
    【bzoj4276】[ONTAK2015]Bajtman i Okrągły Robin 线段树优化建图+费用流
    【bzoj4383】[POI2015]Pustynia 线段树优化建图+差分约束系统+拓扑排序
    【bzoj4519】[Cqoi2016]不同的最小割 分治+最小割
    【bzoj2229】[Zjoi2011]最小割 分治+网络流最小割
    【bzoj3689】异或之 可持久化Trie树+堆
    【bzoj1109】[POI2007]堆积木Klo 动态规划+树状数组
    【bzoj2780】[Spoj]8093 Sevenk Love Oimaster 广义后缀自动机
    【bzoj4804】欧拉心算 欧拉函数
    【bzoj3231】[Sdoi2008]递归数列 矩阵乘法+快速幂
    【bzoj3589】动态树 树链剖分+线段树
  • 原文地址:https://www.cnblogs.com/zengfp/p/10918597.html
Copyright © 2011-2022 走看看