NativeScript自定义旋转器

ns plugin add nativescript-custom-rotors

NativeScript自定义旋转器

nativescript-custom-rotors 向常见的 {N} 视图添加易于使用的属性，以便它们能够被iOS无障碍自定义旋转器访问。无障碍自定义旋转器通过将来自不同容器和地理位置的视图关联到一个通用的无障碍访问组，提供了一种优雅的屏幕阅读器辅助导航解决方案。请参阅Apple WWDC2020的此视频，以获取有关iOS无障碍自定义旋转器的更多信息

注意：此插件仅在iOS上工作。在Android上，插件功能将被忽略。

扩展类

ViewBase 已经扩展了以下接口

interface RotorGroupItem {
  /**
   * @property rotorGroup
   * the name of the group that this view belongs to
  */
  rotorGroup:string;
  /**
   * @property rotorOrder
   * order within the rotor group. defaults to -1
  */
  rotorOrder:number;
}

ContentView 和 BaseLayout 已经扩展了以下接口

interface RotorContainerView {
  /**
   * @property rotorContainer
   * set the view as a RotorContainer
  */
  rotorContainer: boolean;
  /**
   * rotorGroups
   * a map<string,Array<View>> of rotor names and associated views
  */
  rotorGroups: any;
  /**
   * rotorGroupCallback
   * a map<string,Callback> of rotor names and callbacks to execute 
  */
  rotorGroupCallbacks: Map<string, Callback>;
  /**
   * @function removeRotorItem
   * removes a view from it's rotor group
  */
  removeRotorItem: (item: ViewBase) => boolean;
  /**
   * @function insertRotorItem
   * inserts an item into a rotor group at a specified index
  */
  insertRotorItem: (item: ViewBase, index?: number) => boolean;
  /**
   * @function addRotorGroup
   * adds a rotor group to a container
  */
  addRotorGroup: (name: string, items?: Array<ViewBase>) => void;
}

使用方法

在 app.ts 中初始化自定义旋转器插件

...
import {initCustomRotors} from 'nativescript-custom-rotors'
initCustomRotors();
...
Application.run(...);

然后设置一个 ContentView 或 BaseLayout 作为 rotorContainer

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" rotorContainer="true" >
...
</Page>

或者在代码中

export function navigatingTo(e:NavigatedData):void {
  const page = e.object as Page;
  page.rotorContainer = true;
}

@nativescript/custom-rotor 插件将遍历容器的子元素以创建并添加到指定的组中

...
  <Button text="Group1 Button1" tap="{{ testIt }}" class="btn btn-primary" rotorGroup="group1"/>
  <Button text="Group1 Button2" tap="{{ testIt }}" class="btn btn-primary" rotorGroup="group1"/>
  <Button text="Group2 Button1" tap="{{ testIt }}" class="btn btn-primary" rotorGroup="group2"/>
  <Button text="Group2 Button2" tap="{{ testIt }}" class="btn btn-primary" rotorGroup="group2"/>
...

自定义元素也将被遍历，因此您不需要在单个 .xml 或 .ts/.js 文件中指定所有旋转器组。

高级使用

单个元素可以成为自己的旋转器组的一部分，并且可以为 CustomRotor 提供自定义处理。考虑一个用于提供项目评分的控件（受 此ios CustomRotors教程 启发）。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" rotorContainer="true" >
...
<GridLayout id="rating-bar" rows="90, *" columns="*,*,*,*,*" accessible="true" rotorGroup="rating" row="1" col="1">
  <GridLayout class='rating-item' row="1" col="0">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text="1" />
  </GridLayout>
  <GridLayout class='rating-item' row="1" col="1">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text="2" />
  </GridLayout>
  <GridLayout class='rating-item' row="1" col="2">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text="3" />
  </GridLayout>
  <GridLayout class='rating-item' row="1" col="3">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text="4" />
  </GridLayout>
  <GridLayout class='rating-item' row="1" col="4">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text="5" />
  </GridLayout>
  <Label class='rating-desc' color="blue" text="dial rotor to 'rating' then flick up and down to change the rating" row="0" col="0" colSpan="5" textWrap="true"/>
</GridLayout>
...
</Page>

可以使用类似以下内容处理 rating 旋转器组功能

export function navigatingTo(d: NavigatedData): void {
  const page = d.object as Page;
  page.rotorGroupCallbacks.set('rating', ({ forward }) => {
    incrementOrDecrementRating(page, forward);
  });
}

let rating = 0;
function incrementOrDecrementRating(page: Page, increment: boolean): void {
  rating = increment ? Math.min(rating + 1, 5) : Math.max(0, rating - 1);
  const ratingBar = page.getViewById('rating-bar') as GridLayout;
  for (let i = 0; i < ratingBar.getChildrenCount(); i++) {
    const view = ratingBar.getChildAt(i);
    view.backgroundColor = i < rating ? 'green' : 'transparent';
  }
}

许可证

Apache许可证版本2.0