我希望在Flutter 中实现此行为。
您是否知道Flutter中是否有内置的小部件可以提供这种功能?
试试这个CustomScrollView:
CustomScrollView
LayoutBuilder( builder: (context, constraints) { return CustomScrollView( slivers: <Widget>[ SliverPersistentHeader( pinned: true, delegate: Delegate(), ), SliverToBoxAdapter( child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(30)), border: Border.all( width: 2.0, color: Colors.deepPurple, ), ), height: constraints.biggest.height, child: Center( child: Text('Drag me down (or up) in order to see (or hide) the red icon on the top', textAlign: TextAlign.center, textScaleFactor: 5.0, ), ), ), ), ], ); } ),
“委托”类如下:
class Delegate extends SliverPersistentHeaderDelegate { @override Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { // print(shrinkOffset); return Opacity( opacity: 1 - shrinkOffset / maxExtent, child: FittedBox(child: Icon(Icons.alarm, color: Colors.red,), fit: BoxFit.contain), ); } @override double get maxExtent => 300; @override double get minExtent => 100; @override bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true; }
现在尝试上下拖动文本
编辑 :这是一个小修改,类似于您的示例:
LayoutBuilder( builder: (context, constraints) { return CustomScrollView( slivers: <Widget>[ SliverPersistentHeader( pinned: true, delegate: Delegate(), ), SliverToBoxAdapter( child: Container( padding: EdgeInsets.only(top: 75), height: constraints.biggest.height, child: Text('Drag me down (or up) in order to make the red icon bigger (or smaller)', textAlign: TextAlign.center, textScaleFactor: 5.0, ), ), ), ], ); } ),
和修改后的委托类:
class Delegate extends SliverPersistentHeaderDelegate { @override Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { // print(shrinkOffset); return OverflowBox( maxHeight: 400, alignment: Alignment.topCenter, child: Container( height: 400 - shrinkOffset, child: FittedBox(child: Icon(Icons.alarm, color: Colors.red,), fit: BoxFit.contain), ), ); } @override double get maxExtent => 300; @override double get minExtent => 1; @override bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true; }