flutter - 如何使库比蒂诺图标在 flutter 中居中？

Question

首先，我尝试过使用Center()，这样一来，cupertino 的图标似乎就偏离了中心

             IconButton(
              icon: const Icon(
                CupertinoIcons.add_circled,
                color: Colors.black,
              ),
              padding: const EdgeInsets.all(0),
              onPressed: () {}
              ),

将图标直接包装在 Center() 小部件中也不会改变任何东西，这就是它的外观

Answer 1

CupertinoIcons 实际上以 Flutter 为中心。

如果您查看 Cupertino 的源图标 map here您会看到图标与 Flutter 加载的正方形内的底部对齐(甚至略微向左对齐)。因此，您无法在代码中调整它的对齐方式，因为资源已经居中。

更新

我更进一步，在 Flutter sdk 源码上找到了 CupertinoIcons.ttf 字体。然后用 https://www.glyphrstudio.com 打开它.

然后对 MaterialIcons-Regular.ttf 做同样的事情

您可以清楚地看到图标是如何与 Cupertino 上的基线对齐的(就像字符在任何字体上所做的那样)，并且完全居中于 Material 上(就像图标应该那样)。

在 this Medium article 上有更多关于字体度量的信息

您可以在此处找到 CupertinoIcons.ttf:https://github.com/flutter/cupertino_icons/tree/master/assets