前言
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面。
IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的框架千篇一律，好用輪子萬里挑一！Flutter作為這兩年開始崛起的跨平臺開發框架，其第三方生態相比其他成熟框架還略有不足，但輪子的數量也已經很多了。本系列文章挑選日常app開發常用的輪子分享出來，給大家提高搬磚效率，同時也希望flutter的生態越來越完善，輪子越來越多。
本系列文章準備了超過50個輪子推薦，工作原因，儘量每1-2天出一篇文章。
tip:本系列文章合適已有部分flutter基礎的開發者，入門請戳：flutter官網
正文
輪子
- 輪子名稱：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)),
),
),
),
);
}
}
複製程式碼效果圖：
結尾
- 輪子倉庫地址：pub.flutter-io.cn/packages/sl…
- 系列演示demo原始碼：github.com/826327700/f…