如何在NativeScript项目中导入Material Icons？复选框显示异常求助

1. 确认字体文件的注册与引用 #

NativeScript 识别字体依赖于文件本身的内部字体家族名，而非自定义文件名。你可以通过以下方式验证：

• 执行 ns fonts 命令后，查看输出列表中是否有你导入的Material Symbols字体（比如MaterialSymbolsSharp）。
• 如果列表里没有，说明字体未被正确注册：
  • 检查src/fonts下的TTF文件名，确保没有特殊字符或空格；
  • 手动将字体文件复制到平台对应目录：
    • Android: App_Resources/Android/src/main/assets/fonts
    • iOS: App_Resources/iOS/Fonts（注意iOS需要字体文件的大小写与代码中引用完全一致）

2. 修正CSS中的font-family声明 #

你当前的font-family写法可能不匹配实际字体家族名。修改为：

.mi-sharp {
  font-family: 'MaterialSymbolsSharp'; /* 这里用ns fonts命令输出的实际字体名 */
  font-weight: 400;
}

NativeScript对变量字体的参数支持有限，先去掉后面的变量字体配置，用最简的字体家族名即可。

3. 替换Unicode编码的写法 #

HTML实体转义（）在NativeScript的Label中可能无法正确解析，直接使用原生Unicode转义序列更可靠：

<Label
  class="mi-sharp"
  :text="value == null && props.allowIndeterminate ? '\uE834' : value ? '\uE86C' : '\uE835'"
/>

同时要确认这些编码属于Sharp风格的图标——不同风格的Material Icons Unicode编码可能不同，建议直接从Google Icons官网复制对应风格的转义码。

4. 检查TailwindCSS的样式覆盖 #

如果TailwindCSS重置了全局字体样式，可能会覆盖你的自定义font-family。可以给字体类添加更高优先级：

@import 'tailwindcss';

/* 字体类放在Tailwind之后，确保优先级 */
.mi-sharp {
  font-family: 'MaterialSymbolsSharp' !important;
  font-weight: 400;
}

5. 补充组件交互逻辑（可选） #

你的组件目前没有点击切换状态的逻辑，value始终为初始值，可能导致图标显示不符合预期。可以添加点击事件：

<StackLayout 
  orientation="horizontal" 
  class="checkbox-container"
  @tap="toggleValue"
>
  <!-- 现有Label代码 -->
</StackLayout>

<script setup lang="ts">
// 现有代码...
const toggleValue = () => {
  if (props.allowIndeterminate) {
    // 三元状态循环：null → true → false → null
    value.value = value.value === null ? true : value.value === true ? false : null;
  } else {
    value.value = !value.value;
  }
};
</script>

内容的提问来源于stack exchange，提问作者starleaf1