走马灯是一种常见的效果，本文讲一下如何用 PageView 在 Flutter 里实现一个走马灯, 效果如下，当前页面的高度比其它页面高，切换页面的时候有一个高度变化的动画。实现这样的效果主要用到的是 PageView.builder 部件。

开发

 创建首页

首先创建一个 IndexPage 部件，这个部件用来放 PageView ，因为需要使用 setState 方法更新 UI，所以它是 stateful 的。

import 'package:flutter/material.dart';

class IndexPage extends StatefulWidget {
 @override
 _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 elevation: 0.0,
 backgroundColor: Colors.white,
 ),
 body: Column(
 children: <Widget>[],
 ),
 );
 }
}

然后在部件内申明一个 _pageIndex 变量用来保存当前显示的页面的 index，在 initState 生命周期里面初始化一个 PageController 用来配置 PageView 部件。

在 body 的 Column 里面创建一个 PageView.builder ，使用一个 SizedBox 部件指定 PageView 的高度，将 controller 设置为 _pageController ，在 onPageChanged 事件里将当前显示页面的 index 值赋值给 _pageIndex 变量。

int _pageIndex = 0;
PageController _pageController;

@override
void initState() {
 super.initState();
 _pageController = PageController(
 initialPage: 0,
 viewportFraction: 0.8,
 );
}

body: Column(
 children: <Widget>[
 SizedBox(
 height: 580.0,
 child: PageView.builder(
 itemCount: 3,
 pageSnapping: true,
 controller: _pageController,
 onPageChanged: (int index) {
  setState(() {
  _pageIndex = index;
  });
 },
 itemBuilder: (BuildContext ctx, int index) {
  return _buildItem(_pageIndex, index);
 },
 ),
 ),
 ],
),

关键点: 设置 PageController 的 viewportFraction 参数小于 1，这个值是用来设置每个页面在屏幕上显示的比例，小于 1 的话，就可以在当前页面同时显示其它页面的内容了。

/// The fraction of the viewport that each page should occupy.
/// Defaults to 1.0, which means each page fills the viewport in the scrolling direction.
final double viewportFraction;

实现 _buildItem

接着实现 _buildItem 方法，这个方法就是返回 PageView.builder 里每一个页面渲染的内容，第一个参数 activeIndex 是当前显示在屏幕上页面的 index ，第二个参数 index 是每一项自己的 index 。

使用一个 Center 部件让内容居中显示，然后用一个 AnimatedContainer 添加页面切换时的高度变化的动画效果，切换页面的时候使用了 setState 方法改变了 _pageIndex ， Flutter 重新绘制每一项。关键点在于判断当前页面是否为正在显示的页面，是的话它的高度就是 500 不是的话就是 450。