为什么我的 MAUI Blazor 混合应用程序将输入框放在弹出按钮上？

Question

我有一个非常基本的 MAUI Blazor 混合应用程序，我一直根据 这个视频系列 构建。在“Windows Machine”下调试时，它会显示带有 4 个选项的左侧导航栏。直到最近，在 Android 模拟器或我的 Android 手机下运行它时，弹出按钮（“汉堡包”）会在顶部弹出此菜单（然后有 3 个选项）。我在视频系列的第 4 部分中添加了“待办事项”选项，Windows 版本看起来仍然正确，但现在在 Android 模拟器和手机上，某种带有白色文本的透明输入框位于弹出按钮的顶部。如果我尝试单击按钮，键盘会弹出，我可以输入文本，但无法使选项飞出。

我的代码非常基本，但这是我在这个问题开始出现之前添加的 ToDo.razor。我将“Data”文件夹添加到项目根目录：

@page "/todo"
@using MyProjBlazorHybrid.Data
@inject ToDoService ToDoSvc

<h3>To-Do! (@toDos.Count(todo => !todo.IsDone))</h3>

<ul>
    @foreach(var todo in toDos) {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

<input placeholder="Sumthin' to do'" @bind="newToDo" />
<button @onclick="AddToDo">Add To-Do</button>
<button @onclick="Save">Save</button>

@code {
    List<ToDoItem> toDos = new List<ToDoItem>();
    string newToDo;

    protected override void OnInitialized() {
        base.OnInitialized();
        var items = ToDoSvc.LoadItems();
        toDos.AddRange(items);
    }

    void Save() {
        ToDoSvc.SaveItems(toDos);
    }

    void AddToDo() {
        if (string.IsNullOrWhiteSpace(newToDo)) {
            return;
        }

        toDos.Add(new ToDoItem {
                Title = newToDo
            });
        newToDo = string.Empty;
    }
}

数据\ToDoItem.cs：

namespace MyProjBlazorHybrid.Data {
    public class ToDoItem {
        public string? Title { get; set; } = string.Empty;
        public bool IsDone { get; set; } = false;
    }
}

数据\ToDoService.cs：

using System.Text.Json;

namespace MyProjBlazorHybrid.Data {
    public class ToDoService {
        string _file = string.Empty;

        public ToDoService() {
            _file = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "items.json");
        }

        public void SaveItems(IEnumerable<ToDoItem> items) {
            File.WriteAllText(_file, JsonSerializer.Serialize(items));
        }

        public IEnumerable<ToDoItem> LoadItems() {
            if (!File.Exists(_file)) {
                return Enumerable.Empty<ToDoItem>();
            }

            var itemsJSON = File.ReadAllText(_file);
            return JsonSerializer.Deserialize<IEnumerable<ToDoItem>>(itemsJSON) ?? Enumerable.Empty<ToDoItem>();
        }
    }
}

Components\Layout\MainLayout.razor：

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

Components\Layout\NavMenu.razor：

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">MyProjBlazorHybrid</a>
    </div>
</div>

<input https://0.0.0.0/countertype="checkbox" title="Navigation menu" class="navbar-toggler" />

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="weather">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="todo">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> To-Dos
            </NavLink>
        </div>
    </nav>
</div>

编辑：这里有我的 MainPage.xaml：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyProjBlazorHybrid"
             x:Class="MyProjBlazorHybrid.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

此外，如果我调整 Windows 窗口的大小，使其对于左侧导航栏来说太窄，我也会看到它：

请告诉我您还需要查看什么来帮助我。谢谢...

Answer 1

您在 Components\Layout\NavMenu.razor 中编写了一个输入元素：这就是为什么弹出按钮上方有一个输入框。

您可以删除下面的输入。

<input https://0.0.0.0/countertype="checkbox" title="Navigation menu" class="navbar-toggler" />