修复 RenderConstraintsTransformBox 溢出警告

Question

我有一个超过显示尺寸的小部件，我想根据用户输入显示不同的部分。

使用此代码时：

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      ...
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
            Transform.translate(
                offset: const Offset(-50, 0),  // offset hardcoded to -50
                child: Container(
                  width: 2000,
                  height: 100,
                  color: Colors.yellow,
                ),
            ...

小部件遵守约束，因此容器适合显示。转换后，您会看到背景而不是小部件的延续。

我可以将小部件包装在 UnconstrainedBox 中：

UnconstrainedBox(
    alignment: Alignment.topLeft,
    child: Transform.translate(...)
)

这解决了问题，但导致错误：

A RenderConstraintsTransformBox overflowed by 1500 pixels on the right.

我想让它溢出，我不认为这是一个错误！关于如何解决此问题的任何想法？

注意：我可以使用 SingleChildScrollView 和 NeverScrollableScrollPhysics() 并使用控制器来设置位置，但对我来说，这感觉有点矫枉过正。希望有更简单的方法。感谢阅读:)

Answer 1

UnconstrainedBox 不是用于消除内部子溢出警告的小部件。用来放宽约束。

在这种情况下，您可以使用 OverflowBox。使用示例：

SizedBox(
  width: 100,
  height: 100,
  child: OverflowBox(
    minWidth: 150,
    minHeight: 150,
    maxWidth: 150,
    maxHeight: 150,
    child: FlutterLogo(),
  ),
)

修复 RenderConstraintsTransformBox 溢出警告

Fix RenderConstraintsTransformBox overflowed warning

flutter

flutter-layout