flutter - 如何在 Flutter 中制作淡入 "decoration image"效果

Question

我想构建一个小部件，将图像显示为某些内容的背景。我知道我可以用 DecorationImage 做到这一点，问题是我希望图像淡入，因为它可能无法立即使用。

所以我希望它在图像淡入后看起来像这样。

class DecorationExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.fitWidth,
          image: NetworkImage(
              'https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'),
        ),
      ),
      child: Column(
        // Center the content dead center.
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          //Expand the column to take up the availble width
          Container(width: double.infinity),
          Text('Can be'),
          Text('any'),
          Text('size'),
          Text('Depending on the number of rows')
        ],
      ),
    );
  }
}

我的第一直觉是使用堆栈。问题是我需要堆栈将自身限制在列的高度，这可能因内容而异。

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

class StackedImageTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          width: double.infinity,
          child: _fadeInImage(),
        ),
        _content(),
      ],
    );
  }

  _content() => Column(
        // Center the content dead center.
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          //Expand the column to take up the availble width
          Container(width: double.infinity),
          Text('Can be'),
          Text('any'),
          Text('height'),
          Text('Depending on the number of rows')
        ],
      );

  _fadeInImage() => FadeInImage.memoryNetwork(
        placeholder: kTransparentImage,
        fit: BoxFit.fitWidth,
        image: 'https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
      );
}

要运行该示例，请在您的 pubspec.yaml 文件中包含此依赖项:

transparent_image: ^1.0.0

那么基本上我怎样才能达到与装饰图像 (DecorationExample) 相同的效果，但又要使图像很好地淡入视野(就像在 StackedImageTest 小部件中一样)？

Answer 1

事实证明，这很简单😊用 Positioned.fill() 包裹堆栈中的第一层似乎可以解决问题

class FadeInDecorationContainer extends StatelessWidget {
  final Widget child;
  final String imgUrl;

  const FadeInDecorationContainer({Key key, this.child, this.imgUrl}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned.fill(child: _fadeInImage()),
        child,
      ],
    );
  }

  _fadeInImage() => FadeInImage.memoryNetwork(
        placeholder: kTransparentImage,
        fit: BoxFit.fitWidth,
        image: imgUrl,
      );
}

要运行该示例，请在您的 pubspec.yaml 文件中包含此依赖项:

transparent_image: ^1.0.0