美文网首页Flutter
Flutter PageView使用案例

Flutter PageView使用案例

作者: 黑键手记 | 来源:发表于2019-02-27 10:52 被阅读29次

    前言

    现在的小目标是要实现一个 「图片轮播」的效果,我们在 Android 中可以使用ViewPager结合handler或者 Timer去实现。

    而我们在 Flutter中,其实也是类似的。
    那么,在Flutter中,代替 Android 中的ViewPager组件是PageView,而且,这个PageView相比ViewPager扩展性更高。

    我们来看一下

    Flutter PageView 官网

    根据官网的介绍,PageView 在需要展示的页面很多时,有「控件复用」功能,而且,我们还可以通过

        this.scrollDirection = Axis.horizontal  | Axis.vertical
    

    来设置滚动的方向,也就是说,我们还可以完成「纵向滚动」,真的很棒有么有?

    那我们来使用一下pageview

    一、准备数据


    偷的小米官网的轮播图

    二、准备一个PageController

    三、准备一个很普通的PageView ,仔细看看哦

    四、交给身体


    看一下效果图


    用到了FadeInImage.assetNetwork这个可以提供占位图的Image,使用也很简单,大家可以用一下

    onPageChanged 通过这个属性,我们能够监听当前滑动到的页码,从而做出相应的处理

    如果想对当中的一页进行点击,那么给 itemBuilder: 返回的控件包裹上

    GestureDetector,或者直接返回一个button类型的Widget即可

    ok,了解了这个PageView,接下来,我们想法子搞一个「轮播效果」,请见下一篇文章。

    相关文章

      网友评论

        本文标题:Flutter PageView使用案例

        本文链接:https://www.haomeiwen.com/subject/zkxzyqtx.html