简体   繁体   English

背景图像的半径边框 Flutter

[英]Radius Border for Background Image Flutter

I have some question, is it possible to create background image with rounded border?我有一些问题,是否可以创建带有圆形边框的背景图像? I have a Card widget, and I want to put an image as a background.我有一个Card小部件,我想将图像作为背景。 Because i put a radius border on Card , background image is overflowing because its not affected by radius border.因为我在Card上放置了半径边框,所以背景图像溢出,因为它不受半径边框的影响。 Thank you.谢谢你。

                    Card(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                        color: Colors.white,
                        child: Container(
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                fit: BoxFit.fill,
                                colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.3), BlendMode.dstATop),
                                image: new AssetImage("assets/images/dummy_card.jpg")
                            ),
                          ),
                          child: Column()
                        ),
                      ),

Wrap your container in a ClipRRect将您的容器包装在ClipRRect

Please refer to below code请参考以下代码

ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Container(
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                fit: BoxFit.fill,
                                colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.3), BlendMode.dstATop),
                                image: new AssetImage("assets/images/dummy_card.jpg")
                            ),
                          ),
                          child: Column()
                        ),
),


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

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