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

轮播图效果

在各种主流的App当中，比如说淘宝，京东等，打开首页基本能看到顶部都有一个轮播的商品广告图片，这种轮播图的效果，基本每个App都有在用，而在Flutter开发中，它也给我们提供了这样一种控件：PageView。

使用起来也是非常的简单，每张图片就是它的子元素，右多少个图片子元素，就右多少个轮播图，而且不光可以轮播图片，绘制在这个区域的Widget都可以轮播，下面，我们应用PageView这个组件。

轮播子图片代码

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

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

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

PageView代码

因为我们这里只介绍PageView，所以页面上面只有一个PageView，也就是body的内容是一个PageView，这里我们同样把body代码提取出来，代码如下：

Widget _buildBody(){
    return PageView(
      children: <Widget>[
        _buildImage("assets/1.jpg"),
        _buildImage("assets/2.jpg"),
        _buildImage("assets/3.jpg"),
        _buildImage("assets/4.jpg"),
      ],
    );
  }

这段代码也没什么好解释的，调用上面的方法，生成PageView轮播的子图片组件，一共四个，这样主要的代码就设计完成了。

Scaffold

最后就是将上面所有组件，写入到Scaffold结构体中，代码如下：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildBody(),
    );
  }

这样我们就实现了开头的轮播图效果，效果图如开头图所示。

全局主题设置

一般在手机App中，好看的App都有需要皮肤，在Flutter开发中，也可以专门设置颜色，然后提取出来，比如我们常用的MaterialApp，就给我们提供了theme属性，你只需要更改其属性，就可以改变整个app的主题样式，先来看一段代码：

ThemeData buildThemeData() {
  final baseTheme = ThemeData.light();

  return baseTheme.copyWith(
      //顶部导航栏状态栏颜色（ToolBar,Tabbar等）
      primaryColor: kPrimaryColor,
      primaryColorDark: kPrimaryDark,//primaryColor的较深版本
      primaryColorLight: kPrimaryLight,//primaryColor的较浅版本

      accentColor: kSecondaryColor,//前景色(按钮、文本、覆盖边缘效果等)
      bottomAppBarColor: kSecondaryDark,////设置底部导航的背景色
      buttonColor: kSecondaryLight,//Material中RaisedButtons使用的默认填充色。
      //用于渲染Slider的颜色和形状。
      sliderTheme: SliderThemeData.fromPrimaryColors(
        primaryColor: kPrimaryColor,
        primaryColorDark: kPrimaryDark,
        primaryColorLight: kPrimaryLight,
        valueIndicatorTextStyle: TextStyle(),//提示进度的气泡文本的颜色
      )
  );
}

这里我们专门设置了某些主题的样式，而theme属性对应的就是ThemeData，你可以专门设置主题各种颜色，然后提取出来，放置不同的文件中，然后给予按钮， 就可以让用户更改主题设置，比如我们这里专门写了一个colors.dart主题颜色值，代码如下：

import 'package:flutter/material.dart';

const kPrimaryColor = const Color(0xFF4caf50);
const kPrimaryLight = const Color(0xFF80e27e);
const kPrimaryDark = const Color(0xFF087f23);
const kSecondaryColor = const Color(0xFF4dd0e1);
const kSecondaryLight = const Color(0xFF88ffff);
const kSecondaryDark = const Color(0xFF009faf);

这样替换不同的颜色值，就能更改全局主题样式，在Flutter开发中设置更改主题样式还是非常简单的。组件的应用到这里全部讲完，后续项目依然会提到，但不是主要讲解方面，下一篇将讲解Flutter事件处理机制。

本文Github代码下载地址：点击下载