欢迎去看原文：http://tryenough.com/flutter-middle-scroll
效果
代码
代码比较简单，这也是flutter强大的地方。
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: DisplayPage(), ); }}class DisplayPage extends StatefulWidget { @override _DisplayPageState createState() => new _DisplayPageState();}class _DisplayPageState extends State<DisplayPage> { static bool _isAddGradient = false; final List descriptions = [ 'tryenough.com', 'tryenough.com', 'tryenough.com', ]; var decorationBox = DecoratedBox( decoration: _isAddGradient ? BoxDecoration( gradient: LinearGradient( begin: FractionalOffset.bottomRight, end: FractionalOffset.topLeft, colors: [ Color(0x00000000).withOpacity(0.9), Color(0xff000000).withOpacity(0.01), ], ), ) : BoxDecoration(), ); @override Widget build(BuildContext context) { PageController controller = PageController(viewportFraction: 0.8); controller.addListener((){ }); return Scaffold( backgroundColor: Colors.black, body: Center( child: SizedBox.fromSize( size: Size.fromHeight(550.0), child: PageView.builder( controller: controller, itemCount: 3, itemBuilder: (BuildContext context, int index) { return Padding( padding: EdgeInsets.symmetric( vertical: 16.0, horizontal: 8.0, ), child: GestureDetector( onTap: () { Scaffold.of(context).showSnackBar(SnackBar( backgroundColor: Colors.deepOrangeAccent, duration: Duration(milliseconds: 800), content: Center( child: Text( descriptions[index], style: TextStyle(fontSize: 25.0), ), ), )); }, child: Material( elevation: 5.0, borderRadius: BorderRadius.circular(8.0), child: Stack( fit: StackFit.expand, children: [ FlutterLogo(style: FlutterLogoStyle.stacked, colors: Colors.red), decorationBox, ], ), ), ), ); }, ), ), ), ); }}核心就是pageview的controller中的viewportFraction属性。尝试修改下看看效果吧。^_^