flutter - 如何在堆栈内的缩小容器中正确居中文本小部件

Question

我想要一个缩小到它的内容的容器。这个容器应该放在一个堆栈中，这样容器就没有来自外部的约束。

    ConstrainedBox(
      constraints: BoxConstraints(maxWidth: 150.0, minHeight: 48.0),
      child: Container(
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(8), border: Border.all(color: Colors.black)),
        child: SelectableText(
          "Text",
        ),
      ),
    );

此代码让容器围绕我的文本缩小，这正是我想要的。

现在我想在我的容器中将子小部件（文本）居中。我用一个 Center 小部件包装了 Text，它将容器延伸到整个可用的垂直空间，这显然不是我的意图。我能得到的最接近的是带有列的解决方案：

    ConstrainedBox(
      constraints: BoxConstraints(maxWidth: 150.0, minHeight: 48.0),
      child: Container(
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(8), border: Border.all(color: Colors.black)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            SelectableText(
              "Node",
            ),
          ],
        ),
      ),
    );

这使我的文本垂直居中而不是水平居中，并且感觉这不是实现我想要的正确方法。

标签： flutterdartmobile

Answer 1

包裹在Center小部件中

    ConstrainedBox(
      constraints: BoxConstraints(maxWidth: 150.0, minHeight: 48.0),
      child: Center(
        child: Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: Colors.black),
          ),
          child: SelectableText("Text"),
        ),
      ),
    )