简体   繁体   English

如何使这些图像在颤动中半正常半透明?

[英]How can I make these image half normal and half transparent in flutter?

I want the top of the image to look perfect (opaque) and the bottom of the image will transparent .我希望图像的顶部看起来完美(不透明)并且图像的底部是透明的 how can I do it?我该怎么做?

SizedBox(
                width: double.infinity,
                height: 400,
                child: Stack(
                  children: [
                    Positioned(
                      left: 0,
                      height: 450,
                      child: Image.asset(
                        'assets/images/face_woman.png',
                      ),
                    ),
                    Positioned(
                      right: -40,
                      top: 0,
                      height: 450,
                      child: Image.asset(
                        'assets/images/face_man.png',
                      ),
                    )
                  ],
                ),
              )

Alternative approach:替代方法:

AssetImage img = const AssetImage('...');
return Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image(
          alignment: Alignment.topCenter,
          image: img,
          width: {width of the image},
          height: {height of the image/2},
          fit: BoxFit.fitWidth,
        ),
        Opacity(
          opacity: 0.3,
          child: Image(
            alignment: Alignment.bottomCenter,
            image: img,
            width: {width of the image},
            height: {height of the image/2},
            fit: BoxFit.fitWidth,
          ),
        ),
      ],
    ),
  ),
);

在此处输入图片说明

Wrap your images with Opacity widget:使用Opacity小部件包装您的图像:

SizedBox(
  width: double.infinity,
  height: 400,
  child: Stack(
    children: [
      Positioned(
        left: 0,
        height: 450,
        child: Opacity(
          opacity: 0.5,
          child: Image.asset(
            'assets/images/face_woman.png',
          ),
        ),
      ),
      Positioned(
        right: -40,
        top: 0,
        height: 450,
        child: Opacity(
          opacity: 0.5,
          child: Image.asset(
            'assets/images/face_man.png',
          ),
        ),
      )
    ],
  ),
);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM