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

如何在Flutter中进行淡入淡出的“装饰图像”效果

1 个答案: