Flutter 颤振设置DragableScrollableSheet的自定义高度
当我使用Flutter 颤振设置DragableScrollableSheet的自定义高度,flutter,dart,Flutter,Dart,当我使用DraggableScrollableSheet时,我遇到了一些问题,它们是: 将其拖到底后,如何设置最小高度 如何设置最低高度 如何设置最大高度 我如何知道使用stick toappBar,检测最大尺寸时的stick to top SizedBox.expand( 子:幻灯片转换( 位置:_DragableBottomSheetWeen.动画(_DragableBottomSheetController), 子项:DragableScrollableSheet( 生成器:(BuildC
DraggableScrollableSheet
时,我遇到了一些问题,它们是:
appBar
,检测最大尺寸时的stick to topSizedBox.expand(
子:幻灯片转换(
位置:_DragableBottomSheetWeen.动画(_DragableBottomSheetController),
子项:DragableScrollableSheet(
生成器:(BuildContext上下文,ScrollController ScrollController){
返回ClipRRect(
borderRadius:仅限borderRadius(
左上:半径。圆形(10.0),
右上角:半径。圆形(10.0)
),
子:容器(
高度:500.0,
颜色:pageBackgroundColor,
子项:ListView.builder(
控制器:滚动控制器,
物品计数:5,
itemBuilder:(构建上下文,int索引){
返回列表(标题:文本('Item$index'));
},
),
),
);
},
),
),
),
以下是完整的解决方案
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
AnimationController _controller;
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 = 0.7;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: _duration);
}
@override
Widget build(BuildContext context) {
return Scaffold(
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)
print("at top");
else if (dimension <= _height * min * 1.1)
print("at bottom");
}
return ClipRRect(
borderRadius: BorderRadius.only(topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0)),
child: Container(
height: 500.0,
color: Colors.blue[800],
child: ListView.builder(
controller: controller,
itemCount: 5,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text('Item $index'));
},
),
),
);
},
),
),
),
],
),
),
);
}
}
类主页扩展StatefulWidget{
@凌驾
_HomePageState createState()=>\u HomePageState();
}
类_HomePageState使用SingleTickerProviderStateMixin扩展状态{
动画控制器_控制器;
持续时间_Duration=持续时间(毫秒:500);
Tween _Tween=Tween(开始:偏移量(0,1),结束:偏移量(0,0));
双倍高度,最小值=0.1,初始值=0.3,最大值=0.7;
@凌驾
void initState(){
super.initState();
_控制器=动画控制器(vsync:this,duration:_duration);
}
@凌驾
小部件构建(构建上下文){
返回脚手架(
浮动操作按钮:手势检测器(
子:浮动操作按钮(
子项:animateDictions(图标:animateDictions.menu\u关闭,进度:\u控制器),
标高:5,
背景颜色:Colors.deepOrange,
前底色:颜色。白色,
onPressed:()异步{
如果(_controller.isdissed)
_controller.forward();
如果(_controller.isCompleted)_controller.reverse();
},
),
),
正文:SizedBox.expand(
子:堆栈(
儿童:[
标志(尺寸:500),
SizedBox.expand(
子:幻灯片转换(
位置:_-tween.animate(_-controller),
子项:DragableScrollableSheet(
minChildSize:min,//0.1倍的可用高度,拖动时工作表不能低于此高度
maxChildSize:max,//0.7倍的可用高度,拖动时工作表不能超过此高度
initialChildSize:initial,//0.1倍的可用高度,第一次打开时,板材以此尺寸开始
生成器:(BuildContext上下文,ScrollController){
if(controller.hasClients){
变量维度=controller.position.viewportDimension;
_高度???=尺寸/初始值;
如果(尺寸>=_高度*最大值*0.9)
打印(“顶部”);
else if(维度