我正在使用 Material 设计图标作为 float 操作按钮。 现在我想使用自定义图标。我使用 Flutter-Icon-Generator ( http://fluttericon.com/ ) 从 SVG 文件生成了一种字体。一切都很顺利,但图标未居中。
这里是最小化的屏幕截图,欧元图标居中,另一个(自定义图标)不是居中:
FloatingActionButton对应的代码是:
Widget money() {
return Container(
child: FloatingActionButton(
backgroundColor: widget.openColor,
elevation: 0,
heroTag: "btn_money",
onPressed: () {
widget.onPressed(DashboardFabAction.AddMoney);
animate();
},
tooltip: 'Money',
child: Icon(Icons.euro_symbol, color: widget.iconColorOpen,),
),
);
}
Widget eggs() {
return Container(
child: FloatingActionButton(
backgroundColor: widget.openColor,
elevation: 0,
heroTag: "btn_eggs",
onPressed: () {
widget.onPressed(DashboardFabAction.AddEggs);
animate();
},
tooltip: 'Eggs',
child: Icon(CustomIcons.egg, color: widget.iconColorOpen,),
),
);
}
CustomIcons 的代码是:
import 'package:flutter/widgets.dart';
class CustomIcons {
CustomIcons._();
static const _kFontFam = 'CustomIcons';
static const IconData egg = const IconData(0xe800, fontFamily: _kFontFam);
}
pubspec.yaml 在这里并不有趣,因为我在那里得到了正确的图标。
预先感谢您的回答!
最佳答案
我已经找到了这个问题的答案。问题是 svg-path 的高度大于宽度。我尝试使用 inkscape 进行一些“黑客”操作,以向 svg 添加另一个宽度等于高度的不可见路径,但没有成功。
最后我用FontForge打开了字体(.ttf) (开源),将图标居中,再次保存字体,它就工作了。
以下是步骤,它可能会节省某人的时间:
- 在 FontForge 中打开字体
- 点击“查看 - 转到”并输入图标地址(在我的例子中是 0xe800)
- 双击图标打开编辑器
- 指标 - 宽度居中
- 关闭编辑器
- 文件 - 生成字体
- 输入您想要的名称并选择 TrueType 作为字体格式
- 点击“生成”
- 会出现一些对话框,其中包含警告和修复某些问题的建议 - 只需点击"is"或一直查看即可
- 如果弹出一个带有您的图标名称的窗口 - 双击它并修复即将出现的弹出窗口的问题
- 完成 - 在使用新字体之前不要忘记
flutter clean
关于flutter - 自定义 SVG 字体图标未在图标小部件中居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56726377/