Flutter：避免 FlexibleSpaceBar 的不透明效果答案

【问题标题】：Flutter: avoid opacity effect for FlexibleSpaceBarFlutter：避免 FlexibleSpaceBar 的不透明效果
【发布时间】：2021-03-14 10:23:31
【问题描述】：

我使用FlexibleSpaceBar，但仅用于图像。 AppBar 始终位于顶部，因此这两个元素之间根本没有过渡，只是使用 parallax 向上滚动图像的效果。

所以我不需要为图像制作不透明效果。

我知道这是可能的，因为我在 Aliexpress 的应用程序上看到了它，我知道它使用了 Flutter。您可以在此处看到无不透明效果： https://youtu.be/ESSsY2m7vTY?t=28

当我的看起来像这样时： https://youtu.be/Jnm9jN4-wWY

这是我的小部件：

FlexibleSpaceBar(
                  collapseMode: CollapseMode.parallax,
                  background: Hero(
                    tag: widget.newRent == false
                        ? 'rent-image${Provider.of<MyRents>(context).currenRentIndex}'
                        : 'new-rent-image',
                    child: _imageEdited == false
                        ? myRent['images'].isNotEmpty
                            ? CachedNetworkImage(
                                imageUrl: myRent['images'][0],
                                fit: BoxFit.cover,
                                placeholder: (context, url) =>
                                    Center(child: CircularProgressIndicator()),
                                errorWidget: (context, url, error) =>
                                    errorImage(context),
                              )
                            : Provider.of<MyRents>(context, listen: false)
                                    .newGalleryImages
                                    .isNotEmpty
                                ? Image.file(
                                    Provider.of<MyRents>(context, listen: false)
                                        .newGalleryImages[0],
                                    fit: BoxFit.cover)
                                : Container(
                                    padding: const EdgeInsets.all(20.0),
                                    child: Image(
                                      image:
                                          AssetImage('assets/images/icon.jpg'),
                                    ),
                                  )
                        : Image.file(myRent['images'][0], fit: BoxFit.cover),
                  ),
                ),

删除所有检查后，这是一个基本的 FlexibleSpaceBar 和 Hero 转换，没什么特别的

【问题讨论】：

你可以添加一些 UI sn-ps 比如你想要什么？？
已编辑问题
我知道你在说什么。只是当您向上滑动时，标题的背景变得越来越明显（在图片顶部）。对吧？
不，您向下滑动（普通滚动没有拉伸或类似的）。如果没有 SliverAppBar，图像会获得不透明效果。在这里您看不到它，因为它将标题移动到 AppBar 但它发生在我的案例中：api.flutter.dev/flutter/material/FlexibleSpaceBar-class.html
我添加了视频链接。你可以看到我不想拥有的不透明度

标签： flutter flutter-layout

【解决方案1】：

我认为问题在于它确实是一个“栏”，就像小部件的名称所说的那样：FlexibleSpaceBar。您必须适当地扩展此功能并覆盖此行为，或者您可以使用它： https://pub.dev/packages/stretchy_header

【讨论】：

但您可以使用拉伸选项
我发布了一个方法。它会停止做视差效果，直到它达到 AppBar 的高度，但它肯定更好

【解决方案2】：

遵循这种方法： https://stackoverflow.com/a/58973381/4858133

Stack(
                  children: <Widget>[
                    Positioned.fill(
                      child: Hero(
                        tag: widget.newRent == false
                            ? 'rent-image${Provider.of<MyRents>(context).currenRentIndex}'
                            : 'new-rent-image',
                        child: _imageEdited == false
                            // TODO: move it to a separate function
                            ? myRent['images'].isNotEmpty
                                ? CachedNetworkImage(
                                    imageUrl: myRent['images'][0],
                                    fit: BoxFit.cover,
                                    placeholder: (context, url) => Center(
                                        child: CircularProgressIndicator()),
                                    errorWidget: (context, url, error) =>
                                        errorImage(context),
                                  )
                                : Provider.of<MyRents>(context, listen: false)
                                        .newGalleryImages
                                        .isNotEmpty
                                    ? Image.file(
                                        Provider.of<MyRents>(context,
                                                listen: false)
                                            .newGalleryImages[0],
                                        fit: BoxFit.cover)
                                    : Container(
                                        padding: const EdgeInsets.all(20.0),
                                        child: Image(
                                          image: AssetImage(
                                              'assets/images/icon.jpg'),
                                        ),
                                      )
                            : Image.file(myRent['images'][0],
                                fit: BoxFit.cover),
                      ),
                    ),
                  ],
                ),

【讨论】：

这是在SliverAppBar里面？
正确，它的孩子。所以基本上我摆脱了 FlexibleSpaceBar。正如我在另一条评论中发布的那样，不透明度线不是动态的，所以我无能为力
您可以复制整个文件并仅更改这一行并将其用作您自己的FlexibleSpaceBarWithoutOpacity
抱歉没明白你的意思
我的意思是你可以将整个flexible_space_bar.dart复制到新文件中，然后你可以将其名称更改为FlexibleSpaceBarWithoutOpacity，然后将你在final double opacity = 1.0 - Interval(fadeStart, fadeEnd).transform(t);之前发布的这一行更改为final double opacity = 1.0。