Android Flutter實現視頻上滑翻頁效果的示例代碼

Posted on by

前言

我們在短視頻應用中經常會看到不停上滑瀏覽下一條視頻的沉浸式交互效果，這種交互能夠讓用戶不停地翻頁，直到找到喜歡的視頻內容，從而營造一種不斷“搜尋目標”的感覺，讓用戶欲罷不能。這種交互形式在 Flutter 中可以輕松使用 PageView 組件實現。

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,
    this.allowImplicitScrolling = false,
    this.restorationId,
    this.clipBehavior = Clip.hardEdge,
    this.scrollBehavior,
    this.padEnds = true,
  })

其中常用的屬性說明如下：

  • scrollDirection：滑動方向，可以支持縱向翻頁或橫向翻頁，默認是橫向翻頁。
  • controller：翻頁控制器，可以通過控制器來制定初始頁，以及跳轉到具體的頁面。
  • onPageChanged：翻頁後的回調函數，會告知翻頁後的頁碼。
  • reverse：是否反向翻頁，默認是 false。如果橫向滑動翻頁的話，如果開啟反向翻頁，則是從右到左翻頁。如果是縱向翻頁的話，就是從頂部到底部翻頁。
  • children：在翻頁中的組件列表，每一頁都以自定義組件內容，因此這個組件也可以用於做引導頁，或是類似滑動查看詳情的效果。

使用示例

PageView 使用起來非常簡單，我們先定義一個PageView 翻頁的內容組件，簡單地將接收的圖片文件滿屏顯示。代碼如下，實際應用的時候可以根據需要換成其他自定義組件。

 class ImagePageView extends StatelessWidget {
  final String imageName;
  const ImagePageView({Key? key, required this.imageName}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Image.asset(
        imageName,
        fit: BoxFit.fitHeight,
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
      ),
    );
  }
}

之後是定義一個 PageViewDemo 來應用 PageView 翻頁應用示例，代碼如下：

class PageViewDemo extends StatefulWidget {
  const PageViewDemo({Key? key}) : super(key: key);

  @override
  State<PageViewDemo> createState() => _PageViewDemoState();
}

class _PageViewDemoState extends State<PageViewDemo> {
  late PageController _pageController;
  int _pageIndex = 1;

  @override
  void initState() {
    _pageController = PageController(
      initialPage: _pageIndex,
      viewportFraction: 1.0,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: PageView(
        scrollDirection: Axis.vertical,
        onPageChanged: (index) {
          _pageIndex = index;
        },
        controller: _pageController,
        allowImplicitScrolling: false,
        padEnds: true,
        reverse: false,
        children: const [
          ImagePageView(imageName: 'images/earth.jpeg'),
          ImagePageView(imageName: 'images/island-coder.png'),
          ImagePageView(imageName: 'images/mb.jpeg'),
        ],
      ),
    );
  }
}

這個示例裡，我們的 pageController 隻是演示瞭設置初始頁碼。我們看到的 viewportFraction 可以理解為一頁內容占據屏幕的比例，比如我們可以設置該數值為1/3，支持一個屏幕分段顯示3個頁面內容。

PageController 應用

PageController 可以控制滑動到指定位置，比如我們可以調用 animateToPage方法實現一個快速滑動到頂部的懸浮按鈕。

floatingActionButton: FloatingActionButton(
    onPressed: () {
      _pageController.animateToPage(
        0,
        duration: const Duration(
          milliseconds: 1000,
        ),
        curve: Curves.easeOut,
      );
    },
    backgroundColor: Colors.black.withAlpha(180),
    child: const Icon(
      Icons.arrow_upward,
      color: Colors.white,
    ),
  ),

實現效果如下。

PageController 還有如下控制翻頁的方法：

  • jumpToPage：跳轉到指定頁面，但是沒有動畫。註意這裡不會校驗頁碼是否會超出范圍。
  • nextPage：滑動到下一頁，實際上調用的是 animateToPage 方法。
  • previousPage：滑動到上一頁，實際上調用的是 animateToPage 方法。

到此這篇關於Android Flutter實現視頻上滑翻頁效果的示例代碼的文章就介紹到這瞭,更多相關Android Flutter上滑翻頁內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：