flutter好用的輪子推薦九-flutter可定製的上下滑出抽屜

前言

Flutter是谷歌的移動UI框架，能夠快速在iOS和Android上構建高質量的原生用戶界面。git

IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的框架千篇一概，好用輪子萬里挑一！Flutter做爲這兩年開始崛起的跨平臺開發框架，其第三方生態相比其餘成熟框架還略有不足，但輪子的數量也已經不少了。本系列文章挑選平常app開發經常使用的輪子分享出來，給你們提升搬磚效率，同時也但願flutter的生態愈來愈完善，輪子愈來愈多。github

本系列文章準備了超過50個輪子推薦，工做緣由，儘可能每1-2天出一篇文章。markdown

tip:本系列文章合適已有部分flutter基礎的開發者，入門請戳：flutter官網app

正文

輪子

輪子名稱：slide_up_panel
輪子概述：flutter可定製的上下滑出抽屜.
輪子做者：akshath.r.jain@gmail.com
推薦指數：★★★★
經常使用指數：★★★★
效果預覽：

安裝

dependencies:
 sliding_up_panel: ^0.3.6
複製代碼

import 'package:sliding_up_panel/sliding_up_panel.dart';
複製代碼

基本使用

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("SlidingUpPanelExample"),
    ),
    body: SlidingUpPanel(
      panel: Center(
        child: Text("這裏是抽屜區"),
      ),
      body: Center(
        child: Text("這麼是頁面區"),
      ),
    ),
  );
}
複製代碼

參數配置

經過選項能夠實現更多控制：框架

參數	描述
`panel`	(必需）滑入視圖的小部件。當panel摺疊且若是collapsed爲null時，將顯示此Widget的頂部；不然，collapsed將顯示在此小部件的頂部。
`collapsed`	panel摺疊時，小部件顯示在上方。隨着panel打開，此效果逐漸消失。
`body`	位於滑動面板下方的小部件。該小部件會自動調整大小以填充屏幕。
`minHeight`	徹底摺疊時滑動面板的高度。
`maxHeight`	徹底打開時滑動面板的高度。
`border`	在滑動面板上繪製邊框。
`borderRadius`	若是不爲空，則以此將滑板面板繪製圓角。
`boxShadow`	滑動面板表後面投射的陰影。
`color`	填充滑動面板背景的顏色
`padding`	滑動面板padding
`margin`	滑動面板margin
`renderPanelSheet`	設置爲false可不渲染panel位於其上的圖紙。這意味着，只有body，collapsed和panel窗口小部件會被渲染。若是要實現浮動效果或須要對滑動面板的外觀進行更多自定義，請將其設置爲false。
`panelSnapping`	設置爲false可禁用面板快速打開或關閉。
`backdropEnabled`	若是不爲空，則body在面板滑動打開時在上顯示暗陰影。
`backdropColor`	陰影顏色。
`backdropOpacity`	陰影透明度，0.0-1.0
`backdropTapClosesPanel`	是否輕按背景關閉面板。默認爲true。
`controller`	控制器
`onPanelSlide`	若是不爲null，則在面板隨面板的當前位置滑動時調用此回調。該位置是0.0和1.0之間的雙精度數，其中0.0徹底摺疊，而1.0徹底打開。
`onPanelOpened`	若是非null，則在面板徹底打開時調用此回調。
`onPanelClosed`	若是爲非null，則在面板徹底摺疊時調用此回調。
`parallaxEnabled`	若是非null和true，則在面板向上滑動時，SlidingUpPanel會顯示視差效果。本質上，隨着面板的滑動，身體也會向上滑動。
`parallaxOffset`	容許根據面板向上/向下滑動的百分比指定視差效果的程度。推薦值在0.0和1.0之間，其中0.0爲無視差，而1.0則模仿一對一的滾動效果。默認爲10％視差。
`isDraggable`	容許切換SlidingUpPanel的可拖動性。將此設置爲false能夠防止用戶上下拖動面板。默認爲true。
`slideDirection`	抽屜的方向： `SlideDirection.UP` or `SlideDirection.DOWN`.
`defaultPanelState`	面板的默認狀態；PanelState.OPEN或PanelState.CLOSED。此值的默認值PanelState.CLOSED表示面板處於關閉位置，必須將其打開。PanelState.OPEN表示默認狀況下面板是打開的，而且必須由用戶滑動關閉。

實踐：仿頭條小視頻的評論抽屜

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

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

class _ToutiaoDemoState extends State<ToutiaoDemo> {
    PanelController panel = new PanelController();
    double offsetDistance = 0.0;
    double offsetY=0;

    @override
    Widget build(BuildContext context) {
        return Container(
            child: SlidingUpPanel(
                controller:panel,
                minHeight: 0,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(24.0),
                    topRight: Radius.circular(24.0),
                ),
                body: GestureDetector(
                    child: new ConstrainedBox(
                        constraints: BoxConstraints.expand(),
                        child: new Image.asset(
                        "assets/img1.jpg",
                            fit: BoxFit.fill,
                        ),
                    ),
                    onTap: (){
                        panel.close();
                    },
                    onVerticalDragDown: (details){
                        // print(details.globalPosition.dy);
                        offsetDistance=details.globalPosition.dy;
                    },
                    onVerticalDragUpdate: (details){
                        offsetY=details.globalPosition.dy-offsetDistance;
                        if(offsetY>0){
                            print("向下"+offsetY.toString());
                        }else{
                            print("向上"+offsetY.toString());
                            double position=offsetY.abs()/300;
                            position=position>1?1:position;
                            panel.setPanelPosition(position);
                            if(position>0.4){
                                panel.open();
                            }
                        }
                        
                    },
                ),
                panel: Container(
                    child: Center(
                        child: Text("評論區",style: TextStyle(color: Colors.grey,fontSize: 16,fontWeight: FontWeight.normal,decoration:TextDecoration.none)),
                    ),
                ),
            ),
            
        );
    }
}
複製代碼

效果圖： ide

結尾

輪子倉庫地址：pub.flutter-io.cn/packages/sl…
系列演示demo源碼：github.com/826327700/f…