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

标签 flutter dart mobile

我想要一个容器,它的缩小为内容。该容器应放置在堆栈中,以便该容器不受外部约束。

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

enter image description here

此代码使容器在我的文本周围缩小,这正是我想要的。

现在,我想将子窗口小部件(文本)居中放置在我的容器中。我用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",
            ),
          ],
        ),
      ),
    );

这使我的文字垂直居中,而不是水平居中,并且感觉不到这是实现我想要的东西的正确方法。

最佳答案

包裹在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"),
        ),
      ),
    )

关于flutter - 如何在堆栈中缩小的容器中正确居中文本小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60565362/

相关文章:

dart - 我如何知道我的酒吧变压器正在运行的模式?

android - 发送和接收自定义数据并为其使用付费的应用

function - 我决定在 Dart 中执行此操作之前如何不执行返回类型Future <Dynamic>的函数

flutter - 像 bootstrap 一样在 Flutter 中构建布局

android - flutter : how Allow content to overlap SliverAppBar?

css - Chrome 移动位置修复了滚动时的错误

android - 用于移动解决方案的跨平台ORM

flutter - 为什么 flutter 调试应用程序显示 "Slow Mode"横幅?

android - Flutter Firebase 电话身份验证不起作用

dart - 如何扩展 ListView 中的列以覆盖抽屉导航中屏幕的所有剩余空间