只有一个字符的小容器没有正确居中 - Flutter

Posted 2023-02-23

【中文标题】只有一个字符的小容器没有正确居中 - Flutter

【英文标题】：Small container with only one character no centering correctly - Flutter

【发布时间】：2020-06-17 10:57:55

【问题描述】：

只有一个字符的小容器没有正确居中，有或没有填充设置为 0。

如果我减小字体大小将呈现居中，但没有默认文本大小

Container(
  decoration: BoxDecoration(
    color: Colors.green,
    shape: BoxShape.circle,
  ),
  width: 20.0,
  height: 20.0,
  alignment: Alignment.center,
  padding: EdgeInsets.all(0.0),
  child: Text(
    '+',
  ),
)

更新： 使用图标代替字母的行为完全相同。

如果我将大小从 20 更改为 40：

代码

Container(
            width: 40,
            height: 40,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.grey,
            ),
            child: RotatedBox(
              quarterTurns: 3,
              child: Icon(
                Icons.expand_less,
                color: Colors.white,
              ),
            ),
          ),

更新 2：使用 Fitted 可以使用图标：

Container(
            width: 20,
            height: 20,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Theme.of(context).textTheme.caption.color,
            ),
            child: FittedBox(
              child: RotatedBox(
                quarterTurns: 3,
                child: Icon(
                  Icons.expand_less,
                  color: Theme.of(context).primaryColor,
                ),
              ),
            ),
          ),

【问题讨论】：

我无法重现您的问题。您的代码完全按照您的预期工作。屏幕截图：i.imgur.com/ZdKcl3p.png 您的问题可能来自代码中的其他内容。可能是因为您的绿点是装饰，而您的文本是小部件，它们受到的影响不同。

关于我可以检查什么的任何线索？我不敢相信你工作得很好

这可能有助于分享更多您正在使用它的周围代码。

【参考方案1】：

我无法重现这个。但我假设您的默认字体大小对于容器来说太大了。您可以尝试将 Text 包装在 FittedBox 中，这样它就会适应容器：

return Container(
      decoration: BoxDecoration(
        color: Colors.green,
        shape: BoxShape.circle,
      ),
      width: 20.0,
      height: 20.0,
      alignment: Alignment.center,
      padding: EdgeInsets.all(0.0),
      child: FittedBox(
        child:Text('+')
     ),
);

【讨论】：

这增加了一点加号，但没有完全居中

这是 FittedBox i.imgur.com/5FXwIC0.png的结果

检查“颤振医生”。你在哪个分支？

我在想...不会是字体吧？我使用字体 Futura-Medium... 我当前的分支是 Channel stable，v1.12.13+hotfix.8，在 Microsoft Windows [版本 10.0.18362.657]，区域设置 en-US