Question

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

我尝试过使用Stack进行此操作，请参见下面的代码，但是我的问题是，据我了解，Stack小部件将其与所有未定位的小部件的大小相同。这意味着堆栈仅获取图像的大小，而容器在图像的底部被切除。容器的内容也是可变长度的，因此我不能设置固定的高度，但是需要卡片根据图像和容器的大小自行调整大小。

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

这是我的代码的简单版本，我尝试了各种不同的变体而没有实现我想要的。我将不胜感激，能为您提供正确的指导。

Answer 1

您尝试设置overflow吗？

Stack(overflow: Overflow.visible ...

Answer 2

您可以使用Transform.translate小部件将Container“上移”到Image。

Transform.translate{
  offset: Offset(xAxisOffset, yAxisOffset),
 child: //your Container
}

在以下位置查看 Flutter每周小工具视频：https://www.youtube.com/watch?v=9z_YNlRlWfA，或阅读文档以获取有关该小工具的更多信息：https://api.flutter.dev/flutter/widgets/Transform-class.html

Answer 3

您必须添加
alignment：用于堆栈小部件的Alignment.bottomCenter。

请参考以下代码：

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Card(
            child: Stack(
              alignment: Alignment.bottomCenter,
              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(
                  left: 10.0,
                  right: 10.0,
                  child: Container(
                    color: Colors.blueGrey,
                    child: Column(
                      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)))
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

输出：

颤振布局问题

3 个答案: