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

前言

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

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

本系列文章準備了超過50個輪子推薦，工作原因，儘量每1-2天出一篇文章。

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

正文

輪子

• 輪子名稱：slide_up_panel
• 輪子概述：flutter可定製的上下滑出抽屜.
• 輪子作者：[email protected]
• 推薦指數：★★★★
• 常用指數：★★★★
• 效果預覽：

安裝

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("這麼是頁面區"),
 ),
 ),
 );
 }

參數配置

通過選項可以實現更多控制：

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

class ToutiaoDemo extends StatefulWidget {
 ToutiaoDemo({Key key}) : super(key: key);
 @override
 _ToutiaoDemoState createState() => _ToutiaoDemoState();
}
class _ToutiaoDemoState extends State {
 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)),
 ),
 ),
 ),
 );
 }
}

效果圖：