更新记录

1.0.0（2025-02-05） 下载此版本

首发

平台兼容性

bsx-tv-button

一个UTS标准组件，开发示例，可用于TV应用中的按钮。仅支持android !

开发文档

UTS 标准模式组件

没啥好讲的

就是标准组件一个按钮可用于开发TV应用，实现了响应按钮的聚焦变更和确认按键事件

这是引子，可以开发其他类似的TV用组件

<template>
    <!-- #ifdef APP -->
    <scroll-view style="flex:1">
    <!-- #endif -->
        <text>节目一</text>
        <view class="bsx-flex-row">
            <view v-for="i in 6" :key="i" :style="`border:${i == activeIndex ? '2px solid red':''}`">
                <bsx-tv-button class="bsx-tv-button" @onFocusChange="onFocusChangeEvent($event as UniNativeViewEvent, i)" @onConfirmKeyDown="onConfirmKeyDownEvent(i)"></bsx-tv-button>
            </view>
        </view>

        <text>节目二</text>
        <view class="bsx-flex-row">
            <bsx-tv-button class="bsx-tv-button"></bsx-tv-button>

            <bsx-tv-button class="bsx-tv-button"></bsx-tv-button>

            <bsx-tv-button class="bsx-tv-button"></bsx-tv-button>
        </view>

    <!-- #ifdef APP -->
    </scroll-view>
    <!-- #endif -->
</template>

<script setup lang="uts">
    const activeIndex = ref(-1)
    // 按钮聚焦了 可以改变按钮视觉外观
    const onFocusChangeEvent = (e:UniNativeViewEvent,i:number) => {
        console.log('--------onFocusChangeEvent-按钮聚焦改变----', e.detail,i)
        activeIndex.value = ((e.detail as UTSJSONObject)['hasFocus'] as boolean) ? i:-1
    }

    // 按下了确认键 
    const onConfirmKeyDownEvent = (i:number) =>{
        console.log('--------onConfirmKeyDownEvent-----', i)
    }
</script>

<style>
    .bsx-tv-button {
        height: 100;
        width: 200;
        margin-right: 10;
        margin-bottom: 10;
        border-radius: 15;
    }

    .bsx-flex-row {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
</style>