在 Flutter 中向下拖动时缩放内容

Question

我想在 Flutter 中实现以下行为。

您知道 Flutter 中是否有内置小部件可以开箱即用地提供该功能吗？

Answer 1

试试这个 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,
              ),
            ),
          ),
        ),
      ],
    );
  }
),

"delegate"class如下：

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:

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;
}

Answer 2

SliverAppBar 现在使用 stretch 属性:

提供开箱即用的功能

SliverAppBar(
    stretch: true, // <- this
    flexibleSpace: FlexibleSpaceBar(
        background: Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg', fit: BoxFit.cover),
        title: Text('Hello again, SliverAppBar'),
        stretchModes: <StretchMode>[
            StretchMode.zoomBackground, // <- and this
        ],
    ),
);

参考：

在 Flutter 中向下拖动时缩放内容

Scaling content on drag down in Flutter

flutter

flutter-sliver

flutter-animation