如何在Blazor中检测触摸屏并实现列表触摸选择与按钮隐藏

以下是针对你的需求修改后的完整代码，包含触摸选择条目和触摸屏隐藏按钮的功能：

修改后的Razor组件代码 #

@page "/"

<div class="grid grid-cols-2 gap-x-4 content-component-wrapper h-[500px]">
    <!-- 左侧列表 -->
    <div class="bg-[#ddd] overflow-scroll">
        @for (int i = 0; i < Response.name.Count / 2; i++)
        {
            var itemIndex = i;
            <div style="color:@Response.name[itemIndex].ForeColorHexCode; background-color:@Response.name[itemIndex].BackColorHexCode; @(selectedLeftRowIndex == itemIndex ? "border: 4px solid blue !important;" : "")"
                 class="p-4 m-2 cursor-pointer" 
                 id="left-row-@itemIndex"
                 @onclick="() => SelectLeftRow(itemIndex)">
                <h4 class="text-lg font-semibold">@Response.name[itemIndex].GlobalName</h4>
                <p>@Response.name[itemIndex].ID</p>
            </div>
        }
    </div>
    <!-- 右侧列表 -->
    <div class="bg-[#ddd] overflow-scroll">
        @for (int i = Response.name.Count / 2; i < Response.name.Count; i++)
        {
            var itemIndex = i;
            <div style="color:@Response.name[itemIndex].ForeColorHexCode; background-color:@Response.name[itemIndex].BackColorHexCode; @(selectedRightRowIndex == itemIndex ? "border: 4px solid blue !important;" : "")"
                 class="p-4 m-2 cursor-pointer" 
                 id="right-row-@itemIndex"
                 @onclick="() => SelectRightRow(itemIndex)">
                <h4 class="text-lg font-semibold">@Response.name[itemIndex].GlobalName</h4>
                <p>@Response.name[itemIndex].ID</p>
            </div>
        }
    </div>
</div>

<!-- 操作按钮容器：触摸设备自动隐藏 -->
<div class="flex justify-center space-x-4 md:space-x-6 lg:space-x-14 p-4 border-2 border-lightgray rounded-xl mb-8 mt-10 touch-device-hidden">
    <button class="flex items-center justify-center w-36 h-36 text-lg md:w-44 md:h-44 lg:w-48 lg:h-42 font-semibold bg-gold text-white rounded-xl p-4 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none" @onclick="SelectLeftSideNextRow">
        <div class="flex flex-col items-center">
            <RadzenIcon Icon="arrow_downward" class="mb-2 text-xl md:text-2xl lg:text-3xl" />
            <span class="text-sm md:text-base lg:text-lg">@translationStore.Translations["Down"]</span>
        </div>
    </button>
    <button class="flex items-center justify-center w-36 h-36 text-lg md:w-44 md:h-44 lg:w-48 lg:h-42 font-semibold bg-gold text-white rounded-xl p-4 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none" @onclick="SelectLeftSidePreviousRow" >
        <div class="flex flex-col items-center">
            <RadzenIcon Icon="arrow_upward" class="mb-2 text-xl md:text-2xl lg:text-3xl" />
            <span class="text-sm md:text-base lg:text-lg">@translationStore.Translations["Up"]</span>
        </div>
    </button>
    <button class="flex items-center justify-center w-36 h-36 text-lg md:w-44 md:h-44 lg:w-48  lg:h-42 font-semibold bg-gold text-white rounded-xl p-4 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none">
        <div class="flex flex-col items-center">
            <RadzenIcon Icon="lists" class="mb-2 text-xl md:text-2xl lg:text-3xl" />
            <span class="text-sm md:text-base lg:text-lg">@translationStore.Translations["Show"]</span>
        </div>
    </button>
    <button class="flex items-center justify-center w-36 h-36 text-lg md:w-44 md:h-44 lg:w-48  lg:h-42 font-semibold bg-gold text-white rounded-xl p-4 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none">
        <div class="flex flex-col items-center">
            <RadzenIcon Icon="hourglass_empty" class="mb-2 text-xl md:text-2xl lg:text-3xl" />
            <span class="text-sm md:text-base lg:text-lg">@translationStore.Translations["History"]</span>
        </div>
    </button>
    <button class="flex items-center justify-center w-36 h-36 text-lg md:w-44 md:h-44 lg:w-48  lg:h-42 font-semibold bg-gold text-white rounded-xl p-4 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none" @onclick="SelectRightSideNextRow">
        <div class="flex flex-col items-center">
            <RadzenIcon Icon="arrow_downward" class="mb-2 text-xl md:text-2xl lg:text-3xl" />
            <span class="text-sm md:text-base lg:text-lg" >@translationStore.Translations["Down"]</span>
        </div>
    </button>
    <button class="flex items-center justify-center w-36 h-36 text-lg md:w-44 md:h-44 lg:w-48  lg:h-42 font-semibold bg-gold text-white rounded-xl p-4 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none" @onclick="SelectRightSidePreviousRow">
        <div class="flex flex-col items-center">
            <RadzenIcon Icon="arrow_upward" class="mb-2 text-xl md:text-2xl lg:text-3xl" />
            <span class="text-sm md:text-base lg:text-lg" >@translationStore.Translations["Up"]</span>
        </div>
    </button>
</div>

@code {
    // 替换成你实际的Response和translationStore类型
    public YourResponseModel Response { get; set; } = new YourResponseModel();
    public TranslationStore translationStore { get; set; } = new TranslationStore();

    private int? selectedLeftRowIndex;
    private int? selectedRightRowIndex;

    // 左侧列表选中方法
    private void SelectLeftRow(int index)
    {
        selectedLeftRowIndex = index;
    }

    // 右侧列表选中方法
    private void SelectRightRow(int index)
    {
        selectedRightRowIndex = index;
    }

    // 保留你原有的上下导航逻辑
    private void SelectLeftSideNextRow()
    {
        if (selectedLeftRowIndex == null)
            selectedLeftRowIndex = 0;
        else if (selectedLeftRowIndex < (Response.name.Count / 2) - 1)
            selectedLeftRowIndex++;
    }

    private void SelectLeftSidePreviousRow()
    {
        if (selectedLeftRowIndex > 0)
            selectedLeftRowIndex--;
    }

    private void SelectRightSideNextRow()
    {
        if (selectedRightRowIndex == null)
            selectedRightRowIndex = Response.name.Count / 2;
        else if (selectedRightRowIndex < Response.name.Count - 1)
            selectedRightRowIndex++;
    }

    private void SelectRightSidePreviousRow()
    {
        if (selectedRightRowIndex > Response.name.Count / 2)
            selectedRightRowIndex--;
    }
}

全局CSS配置（添加到你的项目CSS文件中） #

/* 针对触摸设备隐藏按钮容器 */
@media (hover: none) and (pointer: coarse) {
    .touch-device-hidden {
        display: none !important;
    }
}

关键修改说明 #

1. 触摸选择条目

   • 给每个列表项添加@onclick事件，触摸设备会自动将触摸操作转换为点击事件，无需额外处理
   • 循环中用var itemIndex = i捕获当前索引，避免Blazor循环的闭包陷阱
   • 添加cursor-pointer类，提升交互体验

2. 触摸屏隐藏按钮

   • 给按钮容器添加自定义类touch-device-hidden
   • 通过CSS媒体查询精准识别触摸设备（无悬停能力+粗指针），自动隐藏按钮
   • 非触摸设备依然保留按钮操作功能

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