颤振布局问题

问题描述 投票:0回答:1

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

Layout of the card

我尝试使用Stack执行此操作,请参阅下面的代码,但我的问题是,根据我的理解,Stack小部件从所有未定位的小部件中获取大小。这意味着Stack只获取图像的大小,而Container在图像的底部被剪切。 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)))
            ],
          ),
        ),
      )
    ],        
  ),
);

这是我的代码的简单版本,我已经尝试了各种不同的变体而没有实现我想要的。我将不胜感激任何帮助或提示,以指导我朝着正确的方向前进。

flutter flutter-layout
1个回答
0
投票

你试着设置overflow吗?

Stack(overflow: Overflow.visible ...
© www.soinside.com 2019 - 2024. All rights reserved.