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

【问题标题】：In Flutter, how would I place a caption like a overlay on a ClipArt?在 Flutter 中，如何在 ClipArt 上放置一个像叠加层一样的标题？
【发布时间】：2021-06-26 23:16:08
【问题描述】：

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

【问题讨论】：

标签： flutter stack overlay opacity

【解决方案1】：

试试这个：

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'),
            ),
          ),
    ],
  ),
);

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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,
          ),
        ),
      );
}

【讨论】：

很高兴听到您自己的解决方案有效！