android抽屉效果上下抽屉_flutter好用的轮子推荐九-flutter可定制的上下滑出抽屉...

野性酷女 2023-01-01 14:52 153阅读 0赞

![51da5e9975af26a0cf5fcd569169c004.png][]

# 前言 #

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

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

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

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

# 正文 #

**轮子**

*  轮子名称：slide\_up\_panel
 *  轮子概述：flutter可定制的上下滑出抽屉.
 *  轮子作者：akshath.r.jain@gmail.com
 *  推荐指数：★★★★
 *  常用指数：★★★★
 *  效果预览：

![b520e3dad834861e350b577e0f10d0be.gif][]

安装

dependencies: sliding_up_panel: ^0.3.6import 'package:sliding_up_panel/sliding_up_panel.dart';

基本使用

@overrideWidget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("SlidingUpPanelExample"), ), body: SlidingUpPanel( panel: Center( child: Text("这里是抽屉区"), ), body: Center( child: Text("这么是页面区"), ), ), ); }

**参数配置**

通过选项可以实现更多控制：

![adcd37810b198ed5bba44035e65e95e2.png][]

**实践：仿头条小视频的评论抽屉**

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

[51da5e9975af26a0cf5fcd569169c004.png]: /images/20221120/f0394a5516974bc3b160ab89253fba83.png
[b520e3dad834861e350b577e0f10d0be.gif]: /images/20221120/e0f4b4a935844eaba68d11ae6085213f.png
[adcd37810b198ed5bba44035e65e95e2.png]: /images/20221120/f23e99b11ce8444b8bc84fe4a50b7597.png