时间戳

首页 > 解决方案 > 如何使库比蒂诺图标在颤动中居中？

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

问题描述

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

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

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

标签： flutterflutter-cupertino

解决方案

CupertinoIcons 实际上以 Flutter 为中心。

如果您在这里查看 Cupertino 的源图标映射，您会发现图标与 Flutter 加载的正方形内的底部对齐（甚至略微向左对齐）。因此，您无法在代码中调整它的对齐方式，因为资源已经居中。

在此处输入图像描述

更新

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

在此处输入图像描述

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

在此处输入图像描述

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

有关此 Medium 文章的字体指标的更多信息

你可以在这里找到 CupertinoIcons.ttf：https ://github.com/flutter/cupertino_icons/tree/master/assets

推荐阅读