flutter05 - ビュー

ページビューページビュー

class PageViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PageView(
//      pageSnapping: false, //false页面不会自动翻过去或者弹回来
//      reverse: true, //反转页面序号 ,第一页成了最后一个,最后一个成了第一个
//      scrollDirection: Axis.vertical,//垂直滑动
//      scrollDirection: Axis.horizontal,//横向滑动
      onPageChanged: (currentPage) => debugPrint("页面改变了$currentPage"),
      controller: PageController(
        initialPage: 2, //默认显示的页面
        viewportFraction: 0.85, //默认页面显示比例 1.0为整个页面
      ),

      children: <Widget>[
        Container(
          color: Colors.brown[900],
          alignment: Alignment(0.0, 0.0),
          child: Text(
            "One",
            style: TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        Container(
          color: Colors.grey[900],
          alignment: Alignment(0.0, 0.0),
          child: Text(
            "Two",
            style: TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        Container(
          color: Colors.blueGrey[900],
          alignment: Alignment(0.0, 0.0),
          child: Text(
            "Three",
            style: TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
      ],
    );
  }
}

オンデマンドでページを生成PageView.build

import 'package:flutter/material.dart';
import 'package:flutter_applist/model/post.dart';

class ViewDemo extends StatelessWidget {
  /**
   * index 索引值
   * 返回值为widget
   */
  Widget _pageItemBuild(BuildContext context, int index) {
    return Stack(
      children: <Widget>[
        SizedBox.expand(
          //用盒子包裹 充满整个空间
          child: Image.network(
            posts[index].imageUrl,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          bottom: 8.0,
          left: 8.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(posts[index].title,style: TextStyle(fontWeight: FontWeight.bold),),
              Text(posts[index].author,),
            ],
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
//    return PageViewDemo();
    return PageView.builder(
      itemCount: posts.length, //确定数量
      itemBuilder: _pageItemBuild,
    );
  }
}

PageView.builderで作成されました

class PageViewbuilderDemo extends StatelessWidget {
  /**
   * index 索引值
   * 返回值为widget
   */
  Widget _pageItemBuild(BuildContext context, int index) {
    return Stack(
      children: <Widget>[
        SizedBox.expand(
          //用盒子包裹 充满整个空间
          child: Image.network(
            posts[index].imageUrl,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          bottom: 8.0,
          left: 8.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                posts[index].title,
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              Text(
                posts[index].author,
              ),
            ],
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      itemCount: posts.length, //确定数量
      itemBuilder: _pageItemBuild,
    );
  }
}

GridView.countとGridViewのを作成します。

class GridViewCountDemo extends StatelessWidget {
  List<Widget> _buildTiles(int length) {
    return List.generate(length, (int index) {
      return Container(
        color: Colors.red,
        alignment: Alignment(0.0, 0.0),
        child: Text(
          "我是$index",
          style: TextStyle(fontSize: 18.0, color: Colors.grey),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3, //一行显示多少个
      crossAxisSpacing: 16.0, //左右间距
      mainAxisSpacing: 16.0, //上下间距
//      scrollDirection: Axis.horizontal,//设置成水平滚动
      children: _buildTiles(10000),
    );
  }
}

GridView.extentとGridViewのを作成します。

class GridViewExtendDemo extends StatelessWidget {
  List<Widget> _buildTiles(int length) {
    return List.generate(length, (int index) {
      return Container(
        color: Colors.blue,
        alignment: Alignment(0.0, 0.0),
        child: Text(
          "我是$index",
          style: TextStyle(fontSize: 18.0, color: Colors.grey),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      maxCrossAxisExtent: 180.0,
      crossAxisSpacing: 16.0, //左右间距
      mainAxisSpacing: 16.0, //上下间距
      children: _buildTiles(10000),
    );
  }
}

GridView.builderとGridViewのを作成します。

class GridViewBuilderDemo extends StatelessWidget {
  Widget _gridItemBuilder(BuildContext context, int index) {
    return Container(
      child: Image.network(
        posts[index].imageUrl,
        fit: BoxFit.cover, //设置
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        padding: EdgeInsets.all(3.0),
        itemCount: posts.length,
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 100,
          mainAxisSpacing: 3.0,
          crossAxisSpacing: 8.0,
        ),
/*        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          mainAxisSpacing: 3.0,
          crossAxisCount: 3,
          crossAxisSpacing: 8.0,
        ),*/
        itemBuilder: _gridItemBuilder);
  }
}