快捷導(dǎo)航

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

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

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

前言

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

PageView 組件介紹

PageView 組件專門設(shè)計用來實現(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：滑動方向，可以支持縱向翻頁或橫向翻頁，默認(rèn)是橫向翻頁。
controller：翻頁控制器，可以通過控制器來制定初始頁，以及跳轉(zhuǎn)到具體的頁面。
onPageChanged：翻頁后的回調(diào)函數(shù)，會告知翻頁后的頁碼。
reverse：是否反向翻頁，默認(rèn)是 false。如果橫向滑動翻頁的話，如果開啟反向翻頁，則是從右到左翻頁。如果是縱向翻頁的話，就是從頂部到底部翻頁。
children：在翻頁中的組件列表，每一頁都以自定義組件內(nèi)容，因此這個組件也可以用于做引導(dǎo)頁，或是類似滑動查看詳情的效果。

使用示例

PageView 使用起來非常簡單，我們先定義一個PageView 翻頁的內(nèi)容組件，簡單地將接收的圖片文件滿屏顯示。代碼如下，實際應(yīng)用的時候可以根據(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 來應(yīng)用 PageView 翻頁應(yīng)用示例，代碼如下：

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 只是演示了設(shè)置初始頁碼。我們看到的 viewportFraction 可以理解為一頁內(nèi)容占據(jù)屏幕的比例，比如我們可以設(shè)置該數(shù)值為1/3，支持一個屏幕分段顯示3個頁面內(nèi)容。

PageController 應(yīng)用

PageController 可以控制滑動到指定位置，比如我們可以調(diào)用 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)效果如下。