【问题标题】:How to center a cupertino icon in flutter?如何使库比蒂诺图标在颤动中居中?
【发布时间】:2019-08-05 11:07:36
【问题描述】:

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

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

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

【问题讨论】:

    标签: flutter flutter-cupertino


    【解决方案1】:

    CupertinoIcons 实际上以 Flutter 为中心。

    如果您查看 Cupertino 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

    【讨论】:

    • 我想我知道你想说什么,但它们不是“居中”,我猜你的实际意思是它们不应该是,因为这就是它们在 iOS 中的样子跨度>
    • 好吧,我不知道这是否真的是由 iOS 设计的。但我发布的链接是 Flutter 使用的源代码。如果我们谈论使图标居中,它是居中的。但是因为它没有修剪它看起来它不是
    • 对不起,我不同意
    • @martinseal1987 我已经更新了我的答案,更多地证明了我在说什么。请看一看。
    • 酷,所以我说它们偏离中心是对的,因为您还得出结论,它们像图标字体一样在基线上对齐,所以它永远不会居中
    猜你喜欢
    • 2021-03-29
    • 2021-10-01
    • 2021-10-12
    • 2019-11-30
    • 1970-01-01
    • 1970-01-01
    • 2020-12-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多