Flutter滚动, 中间显示整图, 前后露出部分图
欢迎去看原文: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属性。尝试修改下看看效果吧。^_^
相关推荐
today0 2020-09-22
89520292 2020-09-18
周公周金桥 2020-09-06
bigname 2020-08-25
灵均兰草 2020-08-20
hannuotayouxi 2020-08-20
ChinaWin 2020-08-13
大象从不倒下 2020-07-31
好好学习天天 2020-07-28
powrexly 2020-07-20
AlisaClass 2020-07-19
88530091 2020-07-14
WebVincent 2020-07-09
骆驼的自白 2020-06-26
lanzhusiyu 2020-06-21
Phoebe的学习天地 2020-06-21
诗蕊 2020-06-14
jiedinghui 2020-05-30