本文目录
轮播图效果
在各种主流的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代码下载地址：点击下载
