（八）Flutter view___pageView与Gridview

简单应用

import 'package:flutter/material.dart';
class ViewDemo extends StatelessWidget{
  @override
    Widget build(BuildContext context) {
      return PageView(

        children: <Widget>[
          Container(
            color: Colors.brown[900],
            alignment: Alignment(0, 0),
            child: Text(
              'ONE',
              style:TextStyle(
                fontSize:32.0,
                color:Colors.white
              )

            ),
          ),
          Container(
            color: Colors.grey[900],
            alignment: Alignment(0, 0),
            child: Text(
              'TWO',
              style:TextStyle(
                fontSize:32.0,
                color:Colors.white
              )

            ),
          ),
          Container(
            color: Colors.blue[900],
            alignment: Alignment(0, 0),
            child: Text(
              'THREE',
              style:TextStyle(
                fontSize:32.0,
                color:Colors.white
              )

            ),
          ),
        ],
      );
    }
}

 

PageView节点写 可以使用以下属性 

pageView每次滑动一半以上就会翻页 一半以下就会弹回来 如果不想这么做

        pageSnapping: false,

 

滑动到这里就会卡住。。不太时尚还是改成true继续操作

从上面得知 pageView的数据是从one 到Three

如果想让这些数据翻转过来 可以使用

 reverse: true,

默认滚动方向是水平滚动 也可以设置成水平滚动

        scrollDirection: Axis.vertical,

当页面滚动 会走以下方法 还是在

  onPageChanged: (currentPageA)=>debugPrint('page:$currentPageA'),

Ctrl+stift+y可以开关控制台 

每次滑动都可以看到信息 默认是从0开始的

I/flutter (23045): page:1
I/flutter (23045): page:2
I/flutter (23045): page:1
I/flutter (23045): page:0

默认设置 第二页面为初始页面

  controller: PageController(
          // 默认第几个页面
          initialPage: 1
        ),

vsCode

Ctrl+shift +p hot restart 执行这个命令 

然后再f5就可以看到效果

Android Studio 

Shift+f10 可以看到效果

还有些其他的属性

       controller: PageController(
          // 默认第几个页面
          initialPage: 1,
          // 是否记住当前页面
          keepPage: false,
          // 当前页面占屏幕比例0-1 这个占比是根据滚动方向调整的
          viewportFraction: 0.85
        ),

keepPage的官方介绍翻译

///使用[PageStorage]保存当前[页面]并恢复，如果
   ///重新创建此控制器的可滚动性。
  ///
   ///如果此属性设置为false，则永远不会保存当前的[页面]
   ///和[initialPage]始终用于初始化滚动偏移量。
   ///如果为true（默认值），则首次使用初始页面
   ///控制器的可滚动创建，因为没有页面
   ///还原。 随后恢复保存的页面
   /// [initialPage]被忽略。
  ///
   /// 也可以看看：
  ///
   /// * [PageStorageKey]，应该在多个时使用
   /// scrollable出现在同一路径中，以区分[PageStorage]
   ///用于保存滚动偏移的位置。

暂时不知道干啥的 先挖个坑吧

GridView

简单的创建 使用GridVIew.count方法

import 'package:flutter/material.dart';

class gridViewCountDemo extends StatelessWidget {
  List<Widget> _buildTitles(int length) {
    return List.generate(length, (int index) {
      return Container(
        color: Colors.grey[300],
        alignment: Alignment(0, 0),
        child: Text(
          'item $index',
          style: TextStyle(fontSize: 18.0, color: Colors.green),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      // 交叉轴显示的数量
      crossAxisCount: 3,
      // 交叉轴的间距
      crossAxisSpacing: 16,
      // 竖着的间距
      mainAxisSpacing: 16.0,
      children: _buildTitles(100),
      // 滚动的方向
      // scrollDirection: Axis.horizontal,
    );
  }
}

更自由的创建

使用 extent

class gridViewExtetnDemo extends StatelessWidget {
  List<Widget> _buildTitles(int length) {
    return List.generate(length, (int index) {
      return Container(
        color: Colors.grey[300],
        alignment: Alignment(0, 0),
        child: Text(
          'item $index',
          style: TextStyle(fontSize: 18.0, color: Colors.green),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.extent(

      // 交叉轴的间距
      crossAxisSpacing: 16,
      // 竖着的间距
      mainAxisSpacing: 16.0,
      children: _buildTitles(100), 
      // 在交叉轴上最大的尺寸
      maxCrossAxisExtent: 150.0,
      // 滚动的方向
      // scrollDirection: Axis.horizontal,
    );
  }
}

好像没什么区别哈。。但是当你把

这个值除以10就懂了 这个个设置是什么意思

使用 build

import 'package:flutter/material.dart';

class GridViewBuildDemo extends StatelessWidget {
  Widget _gridItemBuilder(BuildContext context, int index) {
    return Container(
        color: Colors.yellow[100],
        child: Text(
          "$index",
          style: TextStyle(fontSize: 18, color: Colors.green),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: EdgeInsets.all(8.0),
      itemCount: 50,
      itemBuilder: _gridItemBuilder,
      // 控制视图的显示
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, crossAxisSpacing: 8.0, mainAxisSpacing: 8.0),
    );
  }
}