目录多页面应用独立文件自定义导航栏总结上一篇Gradio.Net (https://github.com/feiyun0112/Gradio.Net)是一个开源的 .NET 库它是 Gradio 的 .NET 移植版本允许你为机器学习模型、API 或任何 C# 函数快速构建演示或 Web 应用程序无需任何 JavaScript、CSS 或 Web 开发经验多页面应用Gradio.Net 应用可以通过Blocks.Route()方法支持多页面。以下是多页面 Gradio.Net 应用的基本结构using Gradio.Net; using var demo gr.Blocks(); // 主页面 var name gr.Textbox(label: Name); // ... 主页面内容 using (demo.Route(Second page, /second)) { var num gr.Number(); // ... 第二页内容 } await demo.Launch();这样可以定义链接到独立页面的路由每个页面有独立的 URL并在 Gradio.Net 应用顶部自动生成的导航栏中展示。以下是一个完整示例using Gradio.Net; using Gradio.Net.Components; using Gradio.Net.Events; string Greet(string name) { return Hello name !; } using var demo gr.Blocks(); var name gr.Textbox(label: Name); var output gr.Textbox(label: Output Box); var greetBtn gr.Button(Greet); greetBtn.Click(fn: Greet, inputs: name, outputs: output); name.Submit(fn: Greet, inputs: name, outputs: output); using (demo.Route(Up)) { var num gr.Number(); using (gr.Row()) { var incBtn gr.Button(Increase); var decBtn gr.Button(Decrease); incBtn.Click(fn: (double x) x 1, inputs: num, outputs: num, apiName: increment); decBtn.Click(fn: (double x) x - 1, inputs: num, outputs: num, apiName: decrement); } } await demo.Launch();所有这些页面将共享同一个后端。注意多页面应用不支持跨页面的交互例如一个页面上的事件监听器不能输出到另一个页面的组件。如需此类功能请使用gr.Tabs()而不是多页面。独立文件为了便于维护你可能希望将不同页面的代码写在不同文件中。由于任何 Gradio.Net 的 Blocks 都可以通过.render()方法导入并渲染到另一个 Blocks 中你可以按如下方式组织示例目录结构MyApp/ Program.cs (主入口) MainPage.cs (主页面) SecondPage.cs (第二页)MainPage.cs对应的代码// MainPage - creates a standalone Blocks demo for the main page public static class MainPage { public static Core.Blocks CreateDemo() { var demo gr.Blocks(); gr.Image(); // demo.Exit(); // Exit context if needed return demo; } }SecondPage.cs对应的代码// SecondPage - creates a standalone Blocks demo for the second page public static class SecondPage { public static Core.Blocks CreateDemo() { var demo gr.Blocks(); var t gr.Textbox(); // Load event: demo.On(trigger: Events.Load, fn: () Loaded, outputs: t); return demo; } }在主Program.cs文件中只需导入这些 demo 对象并调用.render()即可using Gradio.Net; using var demo gr.Blocks(); // MainPage.CreateDemo().render(); // render main page demo using (demo.Route(Second Page)) { // SecondPage.CreateDemo().render(); // render second page demo } await demo.Launch();这让你可以独立运行每个页面进行测试同时也可以创建一个单一入口文件Program.cs作为完整多页面应用的启动点。自定义导航栏默认情况下Gradio.Net 会自动为多页面应用生成导航栏显示所有页面主页面标题为Home。你可以使用gr.Navbar组件自定义导航栏行为。using Gradio.Net; using Gradio.Net.Components; using var demo gr.Blocks(title: Navbar Demo); var navbar gr.Navbar(value: new List(string, string) { (About Me, https://example.com) }, visible: true, mainPageName: Dashboard); gr.Markdown(# Dashboard Page); var hideBtn gr.Button(Hide Navbar); hideBtn.Click(fn: () gr.Navbar(visible: false), outputs: navbar); var showBtn gr.Button(Show Navbar); showBtn.Click(fn: () gr.Navbar(visible: true, mainPageName: Dashboard is Back!), outputs: navbar); using (demo.Route(Settings, /settings)) { gr.Markdown(# Settings Page); } await demo.Launch();gr.Navbar注意事项每个页面最多只能有一个 ‎gr.Navbar组件每个页面的导航栏配置独立。‎mainPageName参数用于自定义导航栏中主页链接的标题。‎value参数允许添加额外的链接内部页面或外部 URL。如果页面没有 ‎gr.Navbar组件将使用默认导航栏行为可见主页标题为Home。总结本章介绍了 Gradio.Net 中多页面应用的实现方式‎‎demo.Route(name, path)为应用添加新页面自动生成导航栏‎共享后端所有页面共用同一后端‎独立文件组织每个页面代码可以分离到独立文件中通过 ‎.render()组合‎‎gr.Navbar可自定义导航栏的可见性、标题和额外链接引入地址