在 Flutter 中，我将如何在 ClipArt 上放置像覆盖一样的标题？

如何解决在 Flutter 中，我将如何在 ClipArt 上放置像覆盖一样的标题？

请看一下附加的屏幕截图。左图是我目前所拥有的。显示本地图像的 ClipRect 小部件：

return Container(
  margin: const EdgeInsets.symmetric(vertical: 5,horizontal: 10),width: 250,height: 350,child: ClipRRect(
    borderRadius: BorderRadius.circular(30),child: Image.asset('assets/images/$image.jpg',fit: BoxFit.cover),),);

它在右边（红色箭头）描绘了我的想法。我怀疑它会涉及堆栈、定位，也许还有不透明度，但我不知道从哪里开始。

解决方法

Stack 就是你要找的东西，用 ClipArt 包裹你的 Stack，就是这样

试试这个：

numpy

谢谢吉姆

您的回答使我找到了解决方案。然而，要使定位小部件工作，封闭的堆栈必须只包含 StatelessWidgets 或 StatefulWidgets，而不是像我最初使用的 ClipRRect 那样的 RenderObjectWidgets。我不得不将图像包含在我称为 StackImage 的 StatelessWidget 中。

class PicTab extends StatelessWidget {
  const PicTab({Key key,@required this.name,@required this.state})
      : super(key: key);
  final String name;
  final SubmodulesState state;

  @override
  Widget build(BuildContext context) {
    //
    String image;

    if (name == null || name.isEmpty) {
      image = 'river_bend';
    } else {
      image = name.trim();
    }
    final stackImage = StackImage(name: 'assets/images/$image.jpg');
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 10,horizontal: 3),child: Stack(
        children: [
          stackImage,Positioned(
            bottom: 0,child: Container(
              width: stackImage.width,height: stackImage.height * 0.3,decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(32),color: Colors.white.withOpacity(0.5),),child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,children: const [
                    Text(''),]),],);
  }
}

class StackImage extends StatelessWidget {
  const StackImage({
    Key key,this.width = 250,this.height = 250,}) : super(key: key);
  final String name;
  final double width;
  final double height;

  @override
  Container build(BuildContext context) => Container(
        width: width,height: height,child: ClipRRect(
          borderRadius: BorderRadius.circular(30),child: Image.asset(
            name,fit: BoxFit.cover,);
}