在 Flutter 中，如何在 ClipArt 上放置像叠加层一样的标题？

Question

请查看随附的屏幕截图。左图是我目前拥有的。显示本地图像的 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、Positioned 和 Opacity，但我不知道从哪里开始。

Answer 1

Stack 将是您要查找的内容，用 Stack 包裹您的 ClipArt 就是这样

Answer 2

试试这个：

return Container(
  margin: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
  width: 250,
  height: 350,
  child: Stack(children:[
  ClipRRect(
    borderRadius: BorderRadius.circular(30),
    child: Image.asset('assets/images/$image.jpg', fit: BoxFit.cover),
  ),
          Positioned(
            bottom: 0,
            child: Container(
              width: double.infinity,
              height: 50.0,
              decoration: new BoxDecoration(
                borderRadius: BorderRadius.circular(30),
                color: Colors.white.withOpacity(0.5),
              ),
              child: Text('blablabla'),
            ),
          ),
    ],
  ),
);

Answer 3

谢谢吉姆，

您的回复使我找到了解决方案。但是，要使 Positioned 小部件起作用，封闭的 Stack 必须仅包含 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,
    @required this.name,
    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,
          ),
        ),
      );
}

在 Flutter 中，如何在 ClipArt 上放置像叠加层一样的标题？

In Flutter, how would I place a caption like a overlay on a ClipArt?

stack

overlay

opacity

flutter