Flutter滚动, 中间显示整图, 前后露出部分图

欢迎去看原文：tryenough.com/flutter-mid…

效果

代码

代码比较简单，这也是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属性。尝试修改下看看效果吧。^_^

转载于:https://juejin.im/post/5cc15a366fb9a03228616d14