大家好, 今天我们来用Flutter来实现一个Android中的卡片式的ViewPager.

• 代码总数100行. 核心代码60行.
• 阅读时间8分钟.

使用到的Flutter技术为:

• PageView, StatefulWidget, Gradient和Snackbar.

先上效果图.
直接run代码如下图.

PageView正常效果图

点击infinite button切换gradient效果:

PageView Gradient效果图

点击每一个卡片, 跳出SnackBar显示description如下:

全屏SnackBar

感觉很简单对吧. 那我们先回顾一下, 在Android里面我们要实现这样的效果的做法通常是什么样的呢?

• 做一个viewpager.
• 一组Fragment.
• 每个Fragment绑定一个xml.
• 最后填充viewpager.

如果我们用Flutter实现起来就非常简单. 我们来过一下:

1. 第一步, 准备我们的images和会在点击时使用在SnackBar的descriptions. 这里我用了我每周五都追的动漫一人之下的几张百度来的图. 什么? 你不知道一人之下? 快去补番!!!

final Listimages = [
'images/wallpapers/wallpaper1.jpg', 
'images/wallpapers/wallpaper2.jpg', 
'images/wallpapers/wallpaper3.jpg',
];

final List descriptions = [
  '不摇碧莲，干翻苍穹',
  '周五快到了，准备追更新',
  '社会我宝姐，人美路子野',
];

1. 做个App, 这里我用了MaterialApp和ThemeData设置为deepOrange.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gallery Demo',
      theme: ThemeData(primarySwatch: Colors.deepOrange),
      home: DisplayPage(),
    );
  }
}

1. 做个StatefulWidget, 因为我们想要维护一个_isAddGradient. 通过这个变量我们想通知widget tree变为gradient和非gradient的两种状态.

class DisplayPage extends StatefulWidget {
  @override
  _DisplayPageState createState() => new _DisplayPageState();
}

class _DisplayPageState extends State<DisplayPage> {
  bool _isAddGradient = false;
///
}

1. 我们先做一个FloatingActionButton. 这个是Scaffold提供给我们的. 我们用这个button来改变_isAddGradient.

   FloatingActionButton _floatingActionButton = FloatingActionButton(
      onPressed: () {
        _isAddGradient = !_isAddGradient;
        setState(() {
          _isAddGradient;
        });
      },
      tooltip: 'Switch Gradient Effect',
      child: Icon(Icons.all_inclusive),
    );

1. 做个DecoratedBox, 可以实现我们要的gradient效果. 这里我们用一个LinearGradient. 从bottomRight到topLeft结束.

    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(),
    );

1. 在_DisplayState的build function返回Scaffold和所有主体逻辑. 这里我们用PageView.builder来建立PageView. 我们给每一个item加上Padding. 加上GestureDetector来实现点击显示SnackBar. 我们在SnackBar的Text上加上Center让它充满全屏.

 return Scaffold(
      floatingActionButton: _floatingActionButton,
      body: Center(
        child: SizedBox.fromSize(
          size: Size.fromHeight(550.0),
          child: PageView.builder(
            controller: PageController(viewportFraction: 0.8),
            itemCount: images.length,
            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: [
                        Image.asset(
                          images[index],
                          fit: BoxFit.cover,
                        ),
                        decorationBox,
                      ],
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );

1. 别忘了在main函数里run下我们的app.

void main() => runApp(MyApp());

好了, 打完收工. 是不是Flutter很简单几行代码我们就实现了Android里的ViewPager了呢?

Source Code下载: 点我去GitHub下载你最爱的源码

欧了, 谢谢观赏，大家加油！