我正在尝试使用Flutter重新创建Google Maps详细信息底页的功能。我正在将DraggableScrollableSheet
与CustomScrollView
和SliverAppbar
一起使用(尽管我很乐意使用另一种方法)。
[这(在大多数情况下)使我向上滚动时具有所需的效果,尽管我想知道如何在用户向下滚动时缓慢降低其高度,从而最终实现条形应用程序栏,一旦minChildSize被“命中”,最终就“隐藏”了它[DraggableScrollableSheet
]上的'
这是我当前的代码(为简单起见,将其删除)。
import 'package:flutter/material.dart'; class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> with TickerProviderStateMixin { AnimationController _controllerDetails; Tween<Offset> _tween = Tween(begin: Offset(0, 1), end: Offset(0, 0)); @override void initState() { super.initState(); _controllerDetails = AnimationController( vsync: this, duration: const Duration(milliseconds: 500)); } bool _onScrollDetails(Notification notification) { return true; } @override void dispose() { _controllerDetails.dispose(); super.dispose(); } void _showDetails() async { if (_controllerDetails.isDismissed) { _controllerDetails.forward(); } else if (_controllerDetails.isCompleted) { _controllerDetails.reverse(); } } Widget _buildDetails() { return SizedBox.expand( child: SlideTransition( position: _tween.animate(_controllerDetails), child: DraggableScrollableActuator( child: NotificationListener( onNotification: _onScrollDetails, child: DraggableScrollableSheet( minChildSize: 0.1, initialChildSize: 0.3, builder: (BuildContext context, ScrollController scrollController) { return Container( child: CustomScrollView( controller: scrollController, slivers: <Widget>[ SliverAppBar( expandedHeight: 200, pinned: true, floating: true, flexibleSpace: FlexibleSpaceBar( title: Text('Hello World'), background: Image.network( "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", fit: BoxFit.cover, )), ), SliverFillRemaining( child: Text( "Once the draggable sheet goes below some value (like 0.6) how can i 'parallax' reduce the expandedHeight of the sliverAppBar, then increasing it again as the user scrolls up..."), ) ], ), ); }, ), ), ), ), ); } @override Widget build(BuildContext context) { return Scaffold( floatingActionButton: GestureDetector( child: FloatingActionButton( child: AnimatedIcon( icon: AnimatedIcons.menu_close, progress: _controllerDetails), elevation: 5, onPressed: _showDetails, ), ), body: SizedBox.expand( child: Stack( children: <Widget>[ _buildDetails(), ], ), ), ); } }
任何想法/代码示例将不胜感激。
我正在尝试使用Flutter重新创建Google Maps详细信息底页的功能。我正在使用DraggableScrollableSheet以及CustomScrollView和SliverAppbar(尽管我很乐于...
您试图达到的效果并不常见,因此可能很难找到一种优雅的方式来实现。