简体   繁体   English

如何将一个cupertino图标集中在颤动?

[英]How to center a cupertino icon in flutter?

First of all, I have tried using Center(), With that out the way, it seems cupertino icons are off center 首先,我尝试过使用Center(),顺便说一下,似乎cupertino图标偏离中心

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

wrapping the icon directly in a Center() widget doesnt change anything either I this is how it looks 直接将图标包装在Center()小部件中并不会改变任何内容,这就是它的外观 略偏中心

CupertinoIcons are actually centered in Flutter. CupertinoIcons实际上以Flutter为中心。

If you take a look at the source icons map for Cupertino here you'll see that the icons are aligned to the bottom inside the square that Flutter loads (and even slightly aligned to the left). 如果您在这里查看Cupertino的源图标地图,您会看到图标与Flutter加载的方块内部的底部对齐(甚至与左侧略微对齐)。 Therefore, you can't adjust it's alignment in your code as the resource is already centered. 因此,您无法在代码中调整它的对齐方式,因为资源已经居中。

在此输入图像描述

UPDATE UPDATE

I went a step further and found the CupertinoIcons.ttf font on the flutter sdk source. 我更进了一步,在颤动的sdk源上找到了CupertinoIcons.ttf字体。 Then opened it with https://www.glyphrstudio.com . 然后用https://www.glyphrstudio.com打开它。

在此输入图像描述

Then did the same with MaterialIcons-Regular.ttf 然后用MaterialIcons-Regular.ttf做同样的事情

在此输入图像描述

You can clearly see how the icon is aligned against the baseline on Cupertino (as characters do on any font), and perfectly centered on Material (as icons should be). 您可以清楚地看到图标如何与Cupertino上的基线对齐(如任何字体上的字符),并且完全以材质为中心(如图标所示)。

There's more information about font metrics on this Medium article 有关此Medium文章的字体指标的更多信息

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM