flutter - 在颤动中制作一个可调整大小的下拉小部件
问题描述
我想创建一个如下图所示的下拉菜单,通过触摸和拖动打开,通过触摸外部关闭。
Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false
),
body: Stack(
children: <Widget>[
Container(
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(bottom: Radius.circular(20))
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Align(
alignment: Alignment.bottomCenter,
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: Divider(
color: Colors.blueGrey[500],
height: 10,
indent: 5,
),
),
Icon(FontAwesomeIcons.angleDoubleDown,size: 15,color: Colors.blueGrey[500],)
],
),
)
],
),
),
Center(child: Text('List View'),)
],
)
)
我想改变高度,但遇到溢出错误!制作这个小部件的最佳方法是什么?我可以在 AppBar 中执行此操作吗?
解决方案
您可以通过某些方式执行此操作,但立即想到的一种方法是在 a顶部CustomPaint
使用您自己的小部件,这样您实际上可以将其他小部件保留在滚动条下方。CustomPainter
Stack
我试图复制您在图像上显示的内容,但可以根据您的需要随意调整。
const kMinScrollBarHeight = 20.0;
class MyScreen extends StatefulWidget {
_MyScreenState createState() => _MyScreenState();
}
class _MyScreenState extends State<MyScreen> {
double _scrollBarOffset = 0.0;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromRGBO(13, 23, 35, 1.0),
appBar: AppBar(
backgroundColor: const Color.fromRGBO(255, 72, 18, 1.0),
),
body: Stack(children: <Widget>[
GestureDetector(
onVerticalDragUpdate: (tapDetails) => setState(() => _scrollBarOffset = tapDetails.globalPosition.dy),
child: Stack(
children: <Widget>[
Center(
child: Text(
'My screen widgets',
style: TextStyle(color: Colors.white),
),
),
Stack(
children: <Widget>[
Positioned(
bottom: MediaQuery.of(context).size.height -
max(_scrollBarOffset,
MediaQuery.of(context).padding.top + kToolbarHeight + kMinScrollBarHeight),
child: CustomPaint(
painter: MyDraggable(),
child: Container(
height: MediaQuery.of(context).size.height,
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlutterLogo(
size: 100.0,
),
Text('Flutter is awesome'),
],
),
),
),
),
],
),
],
),
),
]),
);
}
}
class MyDraggable extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final Paint paint = Paint()..color = Colors.white;
final Radius cornerRadius = Radius.circular(20.0);
final double lineMargin = 30.0;
// Draw slider
canvas.drawRRect(
RRect.fromLTRBAndCorners(0.0, 0.0, size.width, size.height,
bottomLeft: cornerRadius, bottomRight: cornerRadius),
paint);
paint.color = Colors.black.withAlpha(64);
paint.strokeWidth = 1.5;
// Draw triangle
canvas.drawPoints(
PointMode.polygon,
[
Offset((size.width / 2) - 5.0, size.height - 10.0),
Offset((size.width / 2) + 5.0, size.height - 10.0),
Offset((size.width / 2), size.height - 5.0),
Offset((size.width / 2) - 5.0, size.height - 10.0),
],
paint);
// Draw line
canvas.drawLine(Offset(lineMargin, size.height - kMinScrollBarHeight),
Offset(size.width - lineMargin, size.height - kMinScrollBarHeight), paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
推荐阅读
- amazon-web-services - 在根目录中部署 Lambda,而不是使用 claudiajs 在“最新”中部署
- android - 列表项单击上的 Android 底页对话框
- flutter - 如何在 Flutter 中设置不同的值而不是 DropdownButton 中的项目值?
- javascript - 使用 vue (Laravel) 完成简单的任务
- python - Adding a delay in "virus"
- tls1.2 - 如何在 pfsense 中编辑文件 squid.conf 并禁用 DH 密钥交换以改用 RSA
- python - pandas 混合类型值列表:在列表末尾移动字符串
- error-handling - 传播不同错误类型的函数的结果类型的正确错误部分是什么?
- python - python中dec数字到2位十六进制的列表
- python - Ansible 错误:“此模块需要用于 rpm 的 Python 2 绑定”