为什么我的 Stack 剪裁了图像的右侧？

Question

I want to put some text over an image and I thought of using a ClipRRect with a Stack as a child. That way I could stack the images and text on top of each other. When I do this though, the image gets cut off on the right-hand side. Can anyone point out the problem?

Link here as I cannot embed images yet

return ClipRRect(
  borderRadius: BorderRadius.circular(8.0),
  child: Stack(
    children:<Widget>[
      Image.network(
        listItem.imageUrl,
        height: 200.0,
        //width: 100.0,
        fit: BoxFit.cover
      ),
    ]
  ),
);

Answer 1

The reason why the right side of the image is clipped out is that you are placing a rounding the border of the Stack instead of the Image. This is how you can achieve what you've wanted to do:

return Stack(
    children:<Widget>[
      ClipRRect(
        borderRadius: BorderRadius.circular(8.0),
        child: Image.network(
        listItem.imageUrl,
         height: 200.0,
         fit: BoxFit.cover
        ),
       ),
       Align(alignment:Alignment.bottomCenter,child:Text("Hello World")),
    ]
);