首页 > 解决方案 > Flutter:滚动到应用程序页面顶部时如何放大图像?

问题描述

我有一个页面,顶部有一个图像,下面有一些其他小部件。整个页面是可滚动的。有谁知道如何在滚动到顶部时放大图像以创建类似于 Apple Music 中的效果?

在这里,您可以找到我正在尝试创建的示例:

https://i.stack.imgur.com/MiYLZ.gif

标签: flutter

解决方案


尝试使用银

final bannerHigh = 150.0;
return Scaffold(

      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            backgroundColor: Color(0xFF0084C9),
            leading: IconButton(
              icon: Icon(
                Icons.blur_on,
                color: Colors.white70,
              ),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
            ),
            expandedHeight: bannerHigh,
            floating: true,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text("Your title",
                  style: TextStyle(
                      fontSize: 18,
                      color: Colors.white,
                      fontWeight: FontWeight.w600)),
              background: Image.network(
                'image url',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              <Widget>[

              ],
            ),
          ),
        ],
      ),
    );

推荐阅读