阅读 4042

flutter好用的轮子推荐十八-flutter液体效果的页面切换组件

前言

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起的跨平台开发框架,其第三方生态相比其他成熟框架还略有不足,但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来,给大家提高搬砖效率,同时也希望flutter的生态越来越完善,轮子越来越多。

本系列文章准备了超过50个轮子推荐,工作原因,尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者,入门请戳:flutter官网

正文

轮子

  • 轮子名称:liquid_swipe
  • 轮子概述:flutter液体效果的页面切换组件.
  • 轮子作者:sahdeepsingh98@gmail.com
  • 推荐指数:★★★★
  • 常用指数:★★★★
  • 效果预览:
    效果图

安装

dependencies:
  liquid_swipe: ^1.3.0
复制代码
import 'package:liquid_swipe/Constants/Helpers.dart';
import 'package:liquid_swipe/liquid_swipe.dart';
复制代码

使用方法

基础使用:

LiquidSwipe(
    pages: [],//页面列表
    fullTransitionValue: 200,//滑动阀值
    enableSlideIcon: true,//显示右侧图标
    enableLoop: true,//循环切换
    positionSlideIcon: 0.5,//右侧图标的位置
    waveType: WaveType.liquidReveal,//切换效果
    onPageChangeCallback: (page) => pageChangeCallback(page),//页面切换回调
    currentUpdateTypeCallback: (updateType) => updateTypeCallback(updateType),//当前页面更新回调复制代码

完整示例:

class LiquidSwipeDemo extends StatefulWidget {
    LiquidSwipeDemo({Key key}) : super(key: key);

    @override
    _demoState createState() => _demoState();
    }

    class _demoState extends State<LiquidSwipeDemo> {

    WaveType currentAnimate=WaveType.liquidReveal;

    void changeAnimate(){
        setState(() {
            if(currentAnimate==WaveType.liquidReveal){
                currentAnimate=WaveType.circularReveal;
            }else{
                currentAnimate=WaveType.liquidReveal;
            }
        });
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text("liquid_swipe"),
                actions: <Widget>[
                    GoWeb(pluginName: 'liquid_swipe')
                ],
            ),
            body: LiquidSwipe(
                pages: [
                    Container(
                        color: Colors.blue,
                        child: Center(
                            child: FlatButton(
                                child: Text("切换效果"),
                                onPressed: (){
                                    changeAnimate();
                                },
                            ),
                        ),
                    ),
                    Container(
                        color: Colors.pink,
                    ),
                    Container(
                        color: Colors.teal,
                        child: ConstrainedBox(
                            child:Image.network('http://hbimg.b0.upaiyun.com/c9d0ae1ea6dafe5b7af0e2387e161778d7a146b83f571-ByOb1k_fw658',
                            fit: BoxFit.cover,),
                            constraints: new BoxConstraints.expand(),
                        )
                    ),
                ],
                fullTransitionValue: 200,
                enableSlideIcon: true,
                enableLoop: true,
                positionSlideIcon: 0.5,
                waveType: currentAnimate,
                onPageChangeCallback: (page) => pageChangeCallback(page),
                currentUpdateTypeCallback: (updateType) => updateTypeCallback(updateType),
                ),
        );
    }

    pageChangeCallback(int page) {
        print(page);
    }
    updateTypeCallback(UpdateType updateType) {
        print(updateType);
    }
}
复制代码

更多用法请参考pub轮子主页

结尾

关注下面的标签,发现更多相似文章
评论