时间戳

首页 > 解决方案 > 颤振布局问题

flutter - 颤振布局问题

问题描述

我正在测试颤振，但在尝试创建特定布局时遇到了问题。我正在尝试创建包含 2 个部分的卡片。顶部是一张横跨卡片整个宽度并具有设定高度的图像。下面是一个 Container，其中有几个 Text 小部件在 Column 中布置。然后我希望在底部容器中添加一些填充并将其偏移，使其与图像的底部重叠。

卡片布局

我已经尝试使用堆栈来执行此操作，请参见下面的代码，但我的问题是，据我所知，堆栈小部件从所有非定位小部件中获取它的大小。这意味着 Stack 仅获取图像的大小，而 Container 在图像底部被剪切。容器的内容也是可变长度的，所以我不能设置一个固定的高度，而是需要卡片根据它的内容来调整大小，包括图像和容器。

return Card(
  child: Stack(
    children: <Widget>[
      Image.network(
        "https://imbo.vgc.no/users/e24/images/5f2fdecdbd09cfad22aa84e922a3e7c7?t%5B0%5D=crop%3Awidth%3D4027%2Cheight%3D2263%2Cx%3D0%2Cy%3D356&t%5B1%5D=maxSize%3Awidth%3D990&t%5B2%5D=resize%3Awidth%3D990&accessToken=e04754e3d904710cb41dc49bb02df916894bdf5a801c49a5965195cee3c86936",
        height: 200.0,
      ),
      Positioned(
        top: 175.0,
        left: 10.0,
        right: 10.0,
        child: Container(
          color: Colors.fromRGBO(0, 0, 0, 1.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text("This is the header", style: TextStyle(color: Color.fromRGBO(255, 255, 255, 1.0), fontSize: 20.0)),
              Text("This is some content of variable length", style: TextStyle(color: Color.fromRGBO(255, 255, 255, 1.0)))
            ],
          ),
        ),
      )
    ],        
  ),
);

这是我的代码的简单版本，我尝试了各种不同的变体，但没有达到我的期望。我将不胜感激任何帮助或提示，以引导我朝着正确的方向前进。

标签： flutterflutter-layout

解决方案

你试过设置overflow吗？

Stack(overflow: Overflow.visible ...

推荐阅读