【Flutter學習】基本組件之基本滑動PageView組件

一，概述

PageView 是一個滑動視圖列表，它也是繼承至 CustomScrollView 的。

二，構造函數

• 類命構造函數（PageView）
  
  • PageView　
    
    • 使用場景:創建一個可滾動列表
    • 構造函數　

        PageView({
          Key key,
          this.scrollDirection = Axis.horizontal,
          this.reverse = false,
          PageController controller,
          this.physics,
          this.pageSnapping = true,
          this.onPageChanged,
          List<Widget> children = const <Widget>[],
          this.dragStartBehavior = DragStartBehavior.start,
        }) : controller = controller ?? _defaultPageController,
             childrenDelegate = SliverChildListDelegate(children),
             super(key: key);

• 命名構造函數
  
  • PageView.builder
    • 使用場景:創建一個滾動列表，指定數量
    • 重要參數：

    • typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);

      * @required IndexedWidgetBuilder itemBuilder ： 構建子控件
      * typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index); 構建子控件的數目

    • 構造函數
      

        PageView.builder({
          Key key,
          this.scrollDirection = Axis.horizontal,
          this.reverse = false,
          PageController controller,
          this.physics,
          this.pageSnapping = true,
          this.onPageChanged,
          @required IndexedWidgetBuilder itemBuilder,
          int itemCount,
          this.dragStartBehavior = DragStartBehavior.start,
        }) : controller = controller ?? _defaultPageController,
             childrenDelegate = SliverChildBuilderDelegate(itemBuilder, childCount: itemCount),
             super(key: key);

  • PageView.custom
    • 使用場景:創建一個可滾動的列表，自定義子項
      構造函
      
      
    • 重要參數：
      

      * final SliverChildDelegate childrenDelegate;使用代理的方式構建子類列表

    • 構造函數

    • PageView.custom({    Key key,
          this.scrollDirection = Axis.horizontal,
          this.reverse = false,
          PageController controller,
          this.physics,
          this.pageSnapping = true,
          this.onPageChanged,
          @required this.childrenDelegate,
          this.dragStartBehavior = DragStartBehavior.start,
        }) : assert(childrenDelegate != null),
             controller = controller ?? _defaultPageController,
             super(key: key);

三，參數解析

• final Axis scrollDirection: 視圖滾動的方向。Defaults to [Axis.horizontal]
• final bool reverse：是否反轉方向。  Defaults to false
  • ScrollDirection 為 [Axis.horizontal]時，
    
        Reverse為 false時，從左到右開始；
        Reverse為 true時， 從右到左開始；
  • ScrollDirection 為 [Axis.vertical]時，
       Reverse為false時，從上到下開始；
       Reverse為true時， 從下到上開始；
• final PageController controller：控制台。用於監聽視圖的滾動情況。頁面視圖應該如何響應用戶輸入。例如，確定用戶停止拖動頁視圖后，頁視圖如何繼續動畫。
• final ValueChanged<int> onPageChanged：索引改變時觸發。
• final bool pageSnapping：設置為 false 以禁用頁面捕捉，對自定義滾動行為很有用。
• final ScrollPhysics physics：頁面視圖如何響應用戶輸入，即滾動的動畫表現。
• final DragStartBehavior dragStartBehavior：確定處理拖動開始行為的方式

四，示例demo

• demo

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyPageHome(title: 'pageViewDemo',),
    );
  }
}

class MyPageHome extends StatefulWidget {

  //屬性
  String title;
  //構造函數
  MyPageHome({Key key,this.title}):super(key:key);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new MyPageHomeState();
  }
}

class MyPageHomeState extends State<MyPageHome> {
  @override
  Widget build(BuildContext context) {
    
    return new Scaffold(
      appBar: new AppBar(
        title: new  Text(widget.title)
      ),

      body: new Center(
        child: new Container(
          width: 200,
          height: 200,
          child: new PageView(
            children: <Widget>[
              Image.network('https://ws1.sinaimg.cn/large/0065oQSqgy1fwgzx8n1syj30sg15h7ew.jpg'),
              Image.network('https://ws1.sinaimg.cn/large/0065oQSqly1fw8wzdua6rj30sg0yc7gp.jpg'),
              Image.network('https://ws1.sinaimg.cn/large/0065oQSqly1fw0vdlg6xcj30j60mzdk7.jpg'),
              Image.network('https://ws1.sinaimg.cn/large/0065oQSqly1fuo54a6p0uj30sg0zdqnf.jpg'),
            ],
          ),
        ),
      ),
    );
  }
}

• 效果圖
  

五，官方文檔　　

官方文檔