PageView (page視圖)

主要屬性

1. pageSnapping : true / false 是否彈性判斷，拉到少于一半就回彈。
2. reverse : true / false 是否倒置，數(shù)據(jù)源倒放。
3. scrollDirection : Axis.horizontal / Axis.vertical 滾動(dòng)方向。
4. onPageChanged: (currentPage) => debugPrint('Page: $currentPage'), :頁面切換到第幾頁會(huì)調(diào)用該回調(diào)。
5. controller: 頁面屬性 詳細(xì)見代碼里的注釋.
6. children: <Widget>[] 控件列表
7. PageView.builder 根據(jù)數(shù)據(jù)源的多少來創(chuàng)建頁面

• 初始化方法1 ：直接創(chuàng)建 children: <Widget>[] 控件列表

class PageViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return PageView(
      // pageSnapping: false, //是否彈性判斷，拉到少于一半就回彈
      // reverse: true,//倒置，數(shù)據(jù)源倒放
      // scrollDirection: Axis.horizontal, //滾動(dòng)方向
      onPageChanged: (currentPage) => debugPrint('Page: $currentPage'),
      controller: PageController(
        //頁面屬性
        initialPage: 1, //默認(rèn)一開始顯示第幾個(gè)
        keepPage: false, //記錄用戶的滾到到哪個(gè)頁面
        viewportFraction: 0.85, //頁面占用可視視圖的比例，根據(jù)滾動(dòng)方向判斷，如果是水平滾動(dòng)就占用水平方向的 85%
      ),
      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)),
        ),
      ],
    );
  }
}

• 初始化方法2 PageView.builder 根據(jù)數(shù)據(jù)源的多少來創(chuàng)建頁面

//數(shù)據(jù)源
class Post {
  const Post({
    this.title,
    this.author,
    this.imageUrl
  });

  final String title;
  final String author;
  final String imageUrl;
}

final List<Post> posts = [
  Post(
    title: 'Candy Shop',
    author: 'Mohamed Chahin',
    imageUrl: 'https://resources.ninghao.org/images/candy-shop.jpg',
  ),
  Post(
    title: 'Childhood in a picture',
    author: 'Mohamed Chahin',
    imageUrl: 'https://resources.ninghao.org/images/childhood-in-a-picture.jpg',
  ),
];

class PageViewBuilderDemo extends StatelessWidget {
//初始化方法 PageView.builder
  Widget _pageItemBuilder(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) {
    // 根據(jù)數(shù)據(jù)源的多少來創(chuàng)建頁面
    return PageView.builder(
      itemCount: posts.length,
      itemBuilder: _pageItemBuilder,
    );
  }
}

GirdView (網(wǎng)格視圖)

• 初始化方法1 ：直接創(chuàng)建 children: <Widget>[] 控件列表

class GridViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3, //交叉軸放3個(gè)
      mainAxisSpacing: 10,//主軸間隔10
      crossAxisSpacing: 10,//交叉軸間隔10
      children: [
        buildGridItem(),
        buildGridItem(),
        buildGridItem(),
        buildGridItem(),
        buildGridItem(),
        buildGridItem(),
      ],
    );
  }
}
buildGridItem() {
//創(chuàng)建網(wǎng)格 item
  return Container(
    color: Colors.grey[350],
    child: Text(
      'item',
      style: TextStyle(fontSize: 25, color: Colors.grey),
    ),
    alignment: Alignment.center,
  );
}

直接創(chuàng)建 未優(yōu)化.png

優(yōu)化一下代碼,希望傳入item個(gè)數(shù)來統(tǒng)一創(chuàng)建

//創(chuàng)建一個(gè)帶 title的 item

buildGridItemWithText(String title) {
  return Container(
    color: Colors.grey[350],
    child: Text(
      title,
      style: TextStyle(fontSize: 25, color: Colors.grey),
    ),
    alignment: Alignment.center,
  );
}

//通過傳入 length多少個(gè)來創(chuàng)建多少個(gè) item

buildGridsItems(int length) {
  List<Widget> _buildItemsList(int length) {
    return List.generate(length, (index) {
      return buildGridItemWithText('item$index');
    });
  }
  return _buildItemsList(length);
}

class GridViewDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3, //交叉軸放3個(gè)
      mainAxisSpacing: 10,//主軸間隔10
      crossAxisSpacing: 10,//交叉軸間隔10
      children:buildGridsItems(15),
    );
  }
}

通過length創(chuàng)建 item.png