居中显示“字体真棒"图标时出现渲染问题 [英] Rendering issue while centering Font Awesome icon

问题描述

我不明白为什么这个FAB不能将其居中.我尝试了不同的方法，但无法使其完全居中.因为仅在图标的底部添加填充可以使它在设备上居中，但可能并非全部.这是我的代码

 主题(数据:Theme.of(context).copyWith(HighlightColor:Colors.red，splashColor:Colors.red)，子代:SizedBox(高度:MediaQuery.of(context).size.height/7，宽度:MediaQuery.of(context).size.height/7子代:FloatingActionButton(海拔:100，形状:新的CircleBorder(侧面:新的BorderSide(颜色:Colors.black，宽度:5.0))，backgroundColor:Colors.orangeAccent，onPressed:(){}，子代:new Icon(FontAwesomeIcons.chevronUp，大小:80，))，)，)， 

这是带有图标子项的不居中的FAB.

在我看来图标是否居中?

解决方案

与Icons.person相同的代码

与文本"小部件相同的代码

与chevronCircleUp相同的代码

我已经使用了 Show Debug Paint .而且我使用了chevronCircleUp，只是为了清楚地看到小部件的区域.我认为您是对的，还不够集中，但是，此示例使我认为问题与FontAwesome图标有关.

还有这个问题

I don't understand why this FAB doesn't center it's child. I've tried different things but cannot make it to center perfectly. Because adding for example padding only bottom to the icon could make it center on a Device but maybe not for all. this is my code

Theme(
  data: Theme.of(context).copyWith(
      highlightColor: Colors.red, splashColor: Colors.red),
  child: SizedBox(
    height: MediaQuery.of(context).size.height / 7,
    width: MediaQuery.of(context).size.height / 7,
    child: FloatingActionButton(
        elevation: 100,
        shape: new CircleBorder(
            side: new BorderSide(
                color: Colors.black, width: 5.0)),
        backgroundColor: Colors.orangeAccent,
        onPressed: () {},
        child: new Icon(
          FontAwesomeIcons.chevronUp,
          size: 80,
        )),
  ),
),

and this is the not centered FAB with it's icon child.

does it seems only to me that the icon isn't centered?

解决方案

Same code with Icons.person

same code with Text widget

Same code with chevronCircleUp

I've used Show Debug Paint by the way. And I've used chevronCircleUp, just to see clearly the area of widget. I think you are right, it's not centered enough, however, this examples made me think that the problem is related to FontAwesome icons.

There are also this issues

Font Icon Render Box not large enough for some characters

Rectangular icons are centered incorrectly

So I've applied the workaround on the first issue, here is the code. It must be good enough now.

Theme.of(context)
              .copyWith(highlightColor: Colors.red, splashColor: Colors.red),
          child: SizedBox(
              height: MediaQuery.of(context).size.height / 7,
              width: MediaQuery.of(context).size.height / 7,
              child: FloatingActionButton(
                elevation: 100,
                shape: new CircleBorder(
                    side: new BorderSide(color: Colors.black, width: 5.0)),
                backgroundColor: Colors.orangeAccent,
                onPressed: () {},
                child: Text(
                    String.fromCharCode(
                        FontAwesomeIcons.chevronUp.codePoint),
                    style: TextStyle(
                        fontSize: 72.0,
                        fontFamily: FontAwesomeIcons.chevronUp.fontFamily,
                        package: FontAwesomeIcons.chevronUp.fontPackage)),
              )),
        ),

这篇关于居中显示“字体真棒"图标时出现渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！