颤振布局问题答案

【问题标题】：Flutter layout issue颤振布局问题
【发布时间】：2019-05-25 08:33:18
【问题描述】：

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

我尝试过使用 Stack 执行此操作，请参见下面的代码，但我的问题是，据我了解，Stack 小部件从所有非定位小部件中获取它的大小。这意味着 Stack 仅获取图像的大小，而 Container 在图像底部被剪切。 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】：

您尝试设置overflow 吗？

Stack(overflow: Overflow.visible ...

【讨论】：

感谢您的回答。我试过了，当它显示文本时，它会溢出到包装卡小部件之外。我需要卡片根据所有内容调整自身的大小，这就是导致我出现问题的原因，因为在计算大小时似乎定位的小部件不包括在内。如果在此下方添加更多小部件，这也会导致问题，因为溢出的内容将位于下方的任何内容后面，而不是将其进一步向下推

【解决方案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

【讨论】：

【解决方案3】：

你必须添加
对齐：堆栈小部件的 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)))
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

输出：

【讨论】：