Flutter Stack中如何将子Widget高度设为其他子Widget的30%并匹配宽度？

你遇到的问题核心是无法动态获取网络图片加载后的实际尺寸，Positioned.fromRelativeRect只能基于固定偏移定位，没法根据图片高度的比例计算容器尺寸。下面提供两种可行的实现方案：

方案一：用LayoutBuilder动态获取尺寸（无状态实现） #

利用LayoutBuilder监听Stack的尺寸变化（Stack的高度由加载完成的图片决定），直接基于当前尺寸的30%设置容器高度，同时通过left:0, right:0保证宽度与图片一致。

修改后的列表项代码：

return Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    border: Border.all(
      color: ColorsItems().color3,
      width: 1,
    ),
  ),
  child: LayoutBuilder(
    builder: (context, constraints) {
      return Stack(
        fit: StackFit.expand, // 让Stack占满父容器宽度，高度由图片自适应
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: CachedNetworkImage(
              imageUrl: urs[index],
              fit: BoxFit.cover, // 图片填充宽度，高度自适应
              placeholder: (context, url) => const Center(child: CircularProgressIndicator()),
              errorWidget: (context, url, error) => const Icon(Icons.error_outline),
            ),
          ),
          // 仅当图片加载完成（尺寸不为0）时显示容器
          if (constraints.maxHeight > 0)
            Positioned(
              left: 0,
              right: 0,
              bottom: 0, // 可自行修改为top:0将容器放在图片顶部
              height: constraints.maxHeight * 0.3,
              child: Container(
                color: Colors.black.withOpacity(0.5), // 加透明度方便查看效果
                // 可添加文本等其他子组件
              ),
            ),
        ],
      );
    },
  ),
);

方案二：用GlobalKey获取图片精确尺寸（有状态实现） #

如果需要更精准地监听图片加载完成后的尺寸变化，可以通过GlobalKey绑定图片容器，获取其RenderBox的实际尺寸，再更新状态设置容器高度。

首先创建一个自定义列表项组件：

class GridItem extends StatefulWidget {
  final String imageUrl;
  const GridItem({super.key, required this.imageUrl});

  @override
  State<GridItem> createState() => _GridItemState();
}

class _GridItemState extends State<GridItem> {
  final GlobalKey _imageContainerKey = GlobalKey();
  double? _imageHeight;

  @override
  void initState() {
    super.initState();
    // 首次布局后尝试获取尺寸
    WidgetsBinding.instance.addPostFrameCallback((_) => _updateImageSize());
  }

  void _updateImageSize() {
    final renderBox = _imageContainerKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox != null && renderBox.size.height != _imageHeight) {
      setState(() => _imageHeight = renderBox.size.height);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        border: Border.all(
          color: ColorsItems().color3,
          width: 1,
        ),
      ),
      child: Stack(
        children: [
          ClipRRect(
            key: _imageContainerKey,
            borderRadius: BorderRadius.circular(10),
            child: CachedNetworkImage(
              imageUrl: widget.imageUrl,
              fit: BoxFit.cover,
              placeholder: (context, url) => const Center(child: CircularProgressIndicator()),
              errorWidget: (context, url, error) => const Icon(Icons.error_outline),
              imageBuilder: (context, imageProvider) {
                // 图片加载完成后再次更新尺寸
                WidgetsBinding.instance.addPostFrameCallback((_) => _updateImageSize());
                return Image(image: imageProvider, fit: BoxFit.cover);
              },
            ),
          ),
          if (_imageHeight != null)
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              height: _imageHeight! * 0.3,
              child: Container(
                color: Colors.black.withOpacity(0.5),
              ),
            ),
        ],
      ),
    );
  }
}

然后在itemBuilder中使用该组件：

itemBuilder: ((context, index) {
  return GridItem(imageUrl: urs[index]);
}),

为什么原来的方法不行？ #

Positioned.fromRelativeRect的参数是固定像素偏移，无法基于父组件（Stack）的动态尺寸计算比例。而Stack的高度只有在图片加载完成后才会确定，所以必须通过监听尺寸变化的方式来动态设置容器的高度和宽度。

内容的提问来源于stack exchange，提问作者shourya pandey