flutter - Flutter 将 Sliver 添加到 DraggableScrollableSheet
问题描述
添加SliverAppBar
后DraggableScrollableSheet
我无法将工作表向上或向下滚动到屏幕,但里面的列表SliverAppbar
工作正常,
完整源代码:
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: HomePage(),
));
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
AnimationController _controller;
BorderRadiusTween borderRadius;
Duration _duration = Duration(milliseconds: 500);
Tween<Offset> _tween = Tween(begin: Offset(0, 1), end: Offset(0, 0));
double _height, min = 0.1, initial = 0.3, max = 1;
GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: _duration);
borderRadius = BorderRadiusTween(
begin: BorderRadius.circular(10.0),
end: BorderRadius.circular(0.0),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text('DraggableScrollableSheet'),
),
floatingActionButton: GestureDetector(
child: FloatingActionButton(
child: AnimatedIcon(icon: AnimatedIcons.menu_close, progress: _controller),
elevation: 5,
backgroundColor: Colors.deepOrange,
foregroundColor: Colors.white,
onPressed: () async {
if (_controller.isDismissed)
_controller.forward();
else if (_controller.isCompleted) _controller.reverse();
},
),
),
body: SizedBox.expand(
child: Stack(
children: <Widget>[
FlutterLogo(size: 500),
SizedBox.expand(
child: SlideTransition(
position: _tween.animate(_controller),
child: DraggableScrollableSheet(
minChildSize: min, // 0.1 times of available height, sheet can't go below this on dragging
maxChildSize: max, // 0.7 times of available height, sheet can't go above this on dragging
initialChildSize: initial, // 0.1 times of available height, sheet start at this size when opened for first time
builder: (BuildContext context, ScrollController controller) {
if (controller.hasClients) {
var dimension = controller.position.viewportDimension;
_height ??= dimension / initial;
if (dimension >= _height * max * 0.9)
_onWidgetDidBuild(() {
_scaffoldKey.currentState.showSnackBar(SnackBar(
content: Text('ON TOP'),
duration: Duration(seconds: 3),
));
});
else if (dimension <= _height * min * 1.1)
_onWidgetDidBuild(() {
_scaffoldKey.currentState.showSnackBar(SnackBar(
content: Text('ON BOTTOM'),
duration: Duration(seconds: 3),
));
});
}
return AnimatedBuilder(
animation: controller,
builder: (context, child) {
return ClipRRect(
borderRadius: borderRadius.evaluate(CurvedAnimation(parent: _controller, curve: Curves.ease)),
child: Container(
color: Colors.blue[800],
child: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text("What's Up?"),
backgroundColor: Colors.orange,
automaticallyImplyLeading: false,
primary: false,
floating: true,
pinned: true,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, idx) => ListTile(
title: Text("Nothing much"),
subtitle: Text("$idx"),
),
childCount: 100,
),
)
],
),
),
);
},
);
},
),
),
),
],
),
),
);
}
_onWidgetDidBuild(Function callback) {
WidgetsBinding.instance.addPostFrameCallback((_) {
callback();
});
}
}
解决方案
推荐阅读
- java - 对于持久本地存储,Android Room 与 Cloud Firestore 相比有何优势?
- wpf - XamSchedule (WPF):使用滚动条显示更多周
- c# - MSQM 使用二进制格式化程序发送具有字节数组属性的可序列化消息
- asp.net-mvc - 在我的操作中使用 TempData 时发生序列化错误
- odbc - Julia ODBC 连接在 Jupyter 中产生弹出窗口
- sql - 如何插入 sql 并跳过已经存在的内容?
- symfony - 模板中不存在变量实体,如何解决?
- python - 第一次点击后如何将可点击的 QLineEdit 变成普通的?
- css - 当字段是原始的时,如何不触发 ng-pattern?
- c# - 用于打字游戏的波生成器和波数