时间戳

首页 > 解决方案 > 允许/阻止标签的可访问性字体大小调整

nativescript - 允许/阻止标签的可访问性字体大小调整

问题描述

我正在 NativeScript-Vue 应用程序中实现字体大小的可访问性。
我想允许或阻止通过 Android 和 iOS 的 XML 属性调整标签大小，但是平台上的行为和实现是不同的。

Android
默认情况下会缩放所有标签。如果我希望标签不调整大小，我需要setTextSize在loaded事件中调用该函数，遵循这个解决方案。

<Label text="Not resizable" @loaded="$androidFixedLabelSize($event, 70)" />

Vue.prototype.$androidFixedLabelSize = function({ object }, fontSize) {
    if (object.android)
    object.nativeView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, utils.layout.toDevicePixels(fontSize));
}

iOS
标签默认不缩放。要调整标签大小，我需要使用nativescript-accessibility-ext插件并添加属性accessibilityAdjustsFontSize。

<Label text="Resizable" accessibilityAdjustsFontSize="true" />

必须为固定的 Android 添加一个属性，为可调整大小的 iOS 添加一个属性有点麻烦。

我正在考虑让所有标签默认调整大小，并指定我是否希望不通过指令或属性调整大小。
我可以通过自定义指令来实现这一点吗？或者是其他东西？

更新

我能够通过指令在没有硬编码字体大小的情况下防止在 Android 上调整大小，但是有一个问题：update仅针对少数标签触发。el.nativeView.androidinbind和insertedhooks 是未定义的。

Vue.directive("noresize", {
    update: el => {
        if (el.nativeView.android) {
            el.nativeView.android.setTextSize(android.util.TypedValue.COMPLEX_UNIT_DIP, el.nativeView.fontSize);
        } else {
            // iOS code
        }
    }
});

在 iOS 上，我想简单地设置accessibilityAdjustsFontSize="false"，但这意味着默认情况下它是真的。

那么接下来的问题就是：如何accessibilityAdjustsFontSize="true"在iOS上的所有Label组件上进行设置？

标签： nativescriptnativescript-vue

解决方案

感谢@nota/nativescript-accessibility-ext 的开发者 Morten Sjøgren ，我能够添加一个全局事件。可访问性调整大小现在应用于所有 Label 组件，除非该属性noResize为 true。

应用程序.js

import '@nota/nativescript-accessibility-ext';
import { Label } from 'tns-core-modules/ui/label';

// code

Label.on(Label.loadedEvent, ({ object }) => {
    if (object.noResize) {
        if (object.android) {
            object.nativeView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_DIP, object.fontSize);
        }
    } else {
        object.accessibilityAdjustsFontSize = "true";
    }
 });


<Label text="Don't resize" noResize="true" />

推荐阅读