Android Flutter實現(xiàn)視頻上滑翻頁效果的示例代碼

更新時間：2022年10月23日 16:10:58 作者：島上碼農

我們在短視頻應用中經常會看到不停上滑瀏覽下一條視頻的沉浸式交互效果，這種交互能夠讓用戶不停地翻頁，直到找到喜歡的視頻內容。本文將通過Flutter中的PageView組件實現(xiàn)，感興趣的可以了解一下

前言

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

PageView 組件介紹

PageView 組件專門設計用來實現(xiàn)翻頁效果，類定義如下：

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：翻頁后的回調函數(shù)，會告知翻頁后的頁碼。
reverse：是否反向翻頁，默認是 false。如果橫向滑動翻頁的話，如果開啟反向翻頁，則是從右到左翻頁。如果是縱向翻頁的話，就是從頂部到底部翻頁。
children：在翻頁中的組件列表，每一頁都以自定義組件內容，因此這個組件也可以用于做引導頁，或是類似滑動查看詳情的效果。

使用示例

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

 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 可以理解為一頁內容占據(jù)屏幕的比例，比如我們可以設置該數(shù)值為1/3，支持一個屏幕分段顯示3個頁面內容。

PageController 應用

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

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,
    ),
  ),

實現(xiàn)效果如下。