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

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

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

前言

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

PageView 組件介紹

PageView 組件專(zhuān)門(mén)設(shè)計(jì)用來(lái)實(shí)現(xiàn)翻頁(yè)效果，類(lèi)定義如下：

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

其中常用的屬性說(shuō)明如下：

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

使用示例

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

之后是定義一個(gè) PageViewDemo 來(lái)應(yīng)用 PageView 翻頁(yè)應(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'),
        ],
      ),
    );
  }
}

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

PageController 應(yīng)用

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

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

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

PageController 還有如下控制翻頁(yè)的方法：

jumpToPage：跳轉(zhuǎn)到指定頁(yè)面，但是沒(méi)有動(dòng)畫(huà)。注意這里不會(huì)校驗(yàn)頁(yè)碼是否會(huì)超出范圍。
nextPage：滑動(dòng)到下一頁(yè)，實(shí)際上調(diào)用的是 animateToPage 方法。
previousPage：滑動(dòng)到上一頁(yè)，實(shí)際上調(diào)用的是 animateToPage 方法。

到此這篇關(guān)于Android Flutter實(shí)現(xiàn)視頻上滑翻頁(yè)效果的示例代碼的文章就介紹到這了,更多相關(guān)Android Flutter上滑翻頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: