Flutter-视图

滑动视图（PageView）

class ViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PageView(
      children: <Widget>[
        Container(
          color: Colors.brown[900],
          alignment: Alignment.center,
          child: Text(
            'ONE',
            style: TextStyle(
              fontSize: 32,
              color: Colors.white
            ),
          ),
        ),
        Container(
          color: Colors.grey[900],
          alignment: Alignment.center,
          child: Text(
            'TWO',
            style: TextStyle(
                fontSize: 32,
                color: Colors.white
            ),
          ),
        ),
        Container(
          color: Colors.blueGrey[900],
          alignment: Alignment.center,
          child: Text(
            'THREE',
            style: TextStyle(
                fontSize: 32,
                color: Colors.white
            ),
          ),
        ),
      ],
    );
  }
}

预览

主要属性

不知道起什么中文名的属性（pageSnapping）

      // 将此属性设置为false，不管划到什么程度，视图都会停下来，而不是强制显示一个完整的视图
      pageSnapping: false, 

预览

反转（reserve）

视图会发生反转，第一个会变成最后一个

reverse: true, // 反转

滚动方向（scrollDirection）

scrollDirection: Axis.vertical, // 滚动方向。默认为horizontal

滚动方向

onPageChanged

onPageChanged: (currentPage) => debugPrint('Page: $currentPage'), // 当切换到其他视图时会触发这个函数

controller

controller: PageController( // 设置
  initialPage: 1, // 初始显示的页面
  keepPage: false, // 是否保存当前Page的状态，initialPage将会被忽略。如果为false，下次总是从initial开始
  viewportFraction: 1 // 占屏幕多少
),

builder

class PageViewBuilderDemo extends StatelessWidget {
  Widget _pageItemBuilder(BuildContext context, int index){
    return Stack(
      children: <Widget>[
        SizedBox.expand(
          child: Image.network(
            posts[index].imageUrl,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          bottom: 8,
          left: 8,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                posts[index].title,
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              Text(
                posts[index].author,
              )
            ],
          ),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      itemCount: posts.length, // 数量
      itemBuilder: _pageItemBuilder, // 构造方法
    );
  }
}

预览

网格视图（GridView）

count

class GridViewCountDemo extends StatelessWidget {
  List<Widget> _buildTiles(int length){
    return List.generate(length, (int index){
      return Container(
        color: Colors.grey[300],
        alignment: Alignment.center,
        child: Text(
          'Item $index',
          style: TextStyle(fontSize: 18, color: Colors.grey),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3, // 交叉轴的数量
      crossAxisSpacing: 16, // 交叉轴之间的间距
      mainAxisSpacing: 16, // 主轴之间的间距
      scrollDirection: Axis.horizontal,
      children: _buildTiles(50),
    );
  }
}

预览

extent

class GridViewExtentDemo extends StatelessWidget {
  List<Widget> _buildTiles(int length){
    return List.generate(length, (int index){
      return Container(
        color: Colors.grey[300],
        alignment: Alignment.center,
        child: Text(
          'Item $index',
          style: TextStyle(fontSize: 18, color: Colors.grey),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      maxCrossAxisExtent: 150, // 子项在主轴最大的宽度/高度
      crossAxisSpacing: 16,
      mainAxisSpacing: 16,
      scrollDirection: Axis.horizontal,
      children: _buildTiles(50),
    );
  }
}

预览

build

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(8),
      itemCount: posts.length,
      itemBuilder: _gridItemBuilder,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( // 控制显示
        crossAxisCount: 3, // 交叉轴数量为3
        crossAxisSpacing: 16, // 交叉轴中各项间距为8
        mainAxisSpacing: 16 // 主轴间距为8
      ),
    );
  }
}

预览