Flutter(十二)——广告轮播效果与换肤设计

最新推荐文章于 2024-05-28 09:49:34 发布

李元静

最新推荐文章于 2024-05-28 09:49:34 发布

阅读量2.4w

点赞数

分类专栏： Flutter开发手机应用 android 文章标签： flutter android ios 移动开发 PageView

本文链接：https://blog.csdn.net/liyuanjinglyj/article/details/104123650

版权

本文介绍了如何在Flutter中使用PageView组件创建广告轮播图效果，并展示了如何设置全局主题以实现应用的换肤设计。通过轮播子图片代码和PageView的结合，构建了轮播图组件。同时，利用MaterialApp的theme属性进行主题颜色的定制，实现了主题样式的快速切换。

摘要由CSDN通过智能技术生成

本文目录

轮播图效果

在各种主流的App当中，比如说淘宝，京东等，打开首页基本能看到顶部都有一个轮播的商品广告图片，这种轮播图的效果，基本每个App都有在用，而在Flutter开发中，它也给我们提供了这样一种控件：PageView。
轮播效果
使用起来也是非常的简单，每张图片就是它的子元素，右多少个图片子元素，就右多少个轮播图，而且不光可以轮播图片，绘制在这个区域的Widget都可以轮播，下面，我们应用PageView这个组件。

轮播子图片代码

首先，我们需要设计一个轮播的图片组件，因为每个轮播的子图片大小都相等，所以为了减少代码的冗余，我们把它单独提取出来，创建一个私有的方法，代码如下：

Widget _buildImage(String imageFile){
   
    return Container(
      alignment: Alignment.topCenter,
      child: new Image.asset(imageFile),
    );
  }

代码很简单，就是一个Container容器，然后图片在当前页面顶部中间，内部是一个图片，图片通过调用方法传入。