无论用户字体大小如何，如何使文本适合按钮？

Posted 2023-05-07

【中文标题】无论用户字体大小如何，如何使文本适合按钮？

【英文标题】：How can i make a text fit in a button regardless of the user font size?

【发布时间】：2021-10-26 15:45:46

【问题描述】：

我有一个按钮，其标题非常适合我的手机，但我收到了其他字体较大的人提出的一些问题，由于按钮背景太小，文本被裁剪。

我以为这是因为我在文字中使用了宽度和高度，所以我将其更改为百分比，但错误仍然存​​在。 如何调整按钮大小以在任何设备上正确保存文本？

这是我的按钮

button: 
  backgroundColor: blue,
  justifyContent: 'center',
  padding: 9,
  borderRadius: 5,
  marginTop: 10,
  width: '40%',
  height: '10%',
,

这就是我使用它的方式

<View style=styles.button>
  <Ionicons.Button
    name="alarm"
    size=20
    color="white"
    onPress=showTimepicker
    backgroundColor='transparent'>
    <Text style=styles.notifsText>Definir horario de Notificaciones</Text>
  </Ionicons.Button>
</View>

这是我手机上的样子

这是我朋友手机上的样子

【参考方案1】：

试试这个

<Text allowFontScaling=false>example </Text>

【讨论】：

嗯，这不是我想要的，但我想它可以解决问题，但有些人可能无法阅读。

【参考方案2】：

width 和height 作为百分比是指继承的父级 大小的百分比，因此按钮将保持相同大小，而父级不会改变其大小。尝试删除这些属性以允许按钮呈现其完整的可用大小。

【讨论】：

按钮的视图父级的宽度和高度不存在，所以我添加了宽度：'100%' 和高度：'100%'，但这并不能解决我的问题，如果我想要按钮成为 100% 的屏幕我可以做到，但我希望文本适合所有设备，而对于字体较小的用户来说，按钮不会很大。

你可以看到我的字体在android中是最小的，而我的朋友更大一些，所以在我的屏幕上，按钮包含整个文本，但在他没有。

这回答了您自己的问题。您已经为按钮指定了高度，该高度在所有设备上都是相同的，但字体大小会随屏幕大小而变化。您应该尝试移除高度。

【参考方案3】：

发生这种情况是因为 allowFontScaling 的默认值为 true，这就是为什么它在不同手机上保持不同的原因。您可以传递 allowFontScaling=false 作为解决此问题的道具

【参考方案4】：

您也可以使用vw 或vh 作为字体大小的单位。通过一些计算，您将得到一个合适的解决方案。