Flutter PageView 使用詳細概述

優美的應用體驗 來自于細節的處理，更源自于碼農的自我要求與努力，當然也需要碼農年輕靈活的思維，不局限于思維，不局限語言限制，才是程式設計的最高境界。

本文章講述 Flutter 跨平台開發中 PageView的詳細配置使用。

PageView可用于Widget的整屏滑動切換，如當代常用的短視訊APP中的上下滑動切換的功能，也可用于橫向頁面的切換，如APP第一次安裝時的引導頁面，也可用于開發輪播圖功能

1、

PageView 實作的輪播圖

2、

PageView實作的輪播圖 第二篇

3、

PageView 實作的左右滑動切換視圖

在這裡我們以單頁面做為啟動應用程式Demo，建構如下：

//應用入口
void main() {
  ///啟動根目錄
  runApp(MaterialApp(
    theme: ThemeData(primaryColor: Colors.grey[200]),
    home: Example508(),
  ));
}

///代碼清單 5-34 PageView的基本使用
///lib/code/code5/example_508_PageView.dart
class Example508 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ExampleState();
  }
}           

定義一個PageController，用來操作PageView或者監聽PageView ，初始化方法如下：

class Example508 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ExampleState();
  }
}

class _ExampleState extends State<Example508> {
  /// 初始化控制器
  PageController pageController;

  //PageView目前顯示頁面索引
  int currentPage = 0;

  @override
  void initState() {
    super.initState();

    //建立控制器的執行個體
    pageController = new PageController(
      //用來配置PageView中預設顯示的頁面 從0開始
      initialPage: 0,
      //為true是保持加載的每個頁面的狀态
      keepPage: true,
    );

    ///PageView設定滑動監聽
    pageController.addListener(() {
      //PageView滑動的距離
      double offset = pageController.offset;
      //目前顯示的頁面的索引
      double page = pageController.page;
      print("pageView 滑動的距離 $offset  索引 $page");
    });
  }
           

當然在這裡的Demo小編寫成的是縱向的滑動，如這樣的縱向滑動的一般是如整屏視屏播放，然後上下滑動切換。

然後在頁面的主體我們就是建構了一個PageView，其詳細概述如下：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PageView "),
      ),
      body: Container(
        height: 200,
        child: PageView.builder(
          //當頁面選中後回調此方法
          //參數[index]是目前滑動到的頁面角标索引 從0開始
          onPageChanged: (int index) {
            print("目前的頁面是 $index");
            currentPage = index;
          },
          //值為flase時 顯示第一個頁面 然後從左向右開始滑動
          //值為true時 顯示最後一個頁面 然後從右向左開始滑動
          reverse: false,
          //滑動到頁面底部無回彈效果
          physics: BouncingScrollPhysics(),
          //縱向滑動切換
          scrollDirection: Axis.vertical,
          //頁面控制器
          controller: pageController,
          //所有的子Widget
          itemBuilder: (BuildContext context, int index) {
            return Container(
              //縮放的圖檔
              width: MediaQuery.of(context).size.width,
              child: Image.asset(
                "assets/images/2.0x/banner3.webp",
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_upward),
        onPressed: () {
          //
          if (currentPage > 0) {
            //滾動到上一屏
            pageController.animateToPage(
              currentPage - 1,
              curve: Curves.ease,
              duration: Duration(milliseconds: 200),
            );
          }
        },
      ),
    );
  }           

在這裡的 floatingActionButton 懸浮按鈕小編隻是寫了一個控制PageView上滑一個頁面的功能，是PageController來操作的，詳細方法描述如下：

void pageViewController() {
    //動畫的方式滾動到指定的頁面
    pageController.animateToPage(
      //子Widget的索引
      0,
      //動畫曲線
      curve: Curves.ease,
      //滾動時間
      duration: Duration(milliseconds: 200),
    );

    //動畫的方式滾動到指定的位置
    pageController.animateTo(
      100,
      //動畫曲線
      curve: Curves.ease,
      //滾動時間
      duration: Duration(milliseconds: 200),
    );

    //無動畫切換到指定的頁面
    pageController.jumpToPage(0);
    //無動畫 切換到指定的位置
    pageController.jumpTo(100);
  }           

【x1】微信公衆号的每日提醒 随時随記 每日積累 随心而過 文章底部掃碼關注

【x2】各種系列的視訊教程 免費開源 關注 你不會迷路 【x3】系列文章 百萬 Demo 随時 複制粘貼 使用 【x4】簡短的視訊不一樣的體驗

不局限于思維，不局限語言限制，才是程式設計的最高境界。

以小編的性格，肯定是要錄制一套視訊的，随後會上傳

有興趣 你可以關注一下

西瓜視訊 --- 早起的年輕人