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