Blazor 怎么监听页面大小变化

blazor通过js interop监听window.resize事件：先在js端注册监听器并调用.net方法，再在c#组件中定义onresize回调更新状态并重渲染。

Blazor 本身不直接提供内置的 window.resize 事件绑定机制，但可以通过 JavaScript 互操作（JS Interop）监听浏览器窗口大小变化，并把尺寸数据传回 C# 组件。整个过程分三步：注册 JS 监听器、定义回调方法、在组件中更新状态。

用 JS Interop 注册 resize 监听器

需要在 JavaScript 端设置一个监听函数，在窗口大小变化时调用 .NET 方法。推荐在 `_Host.cshtml` 或 `index.html` 的 `<script>` 中添加： <pre class='brush:js;toolbar:false;'>window.blazorHelpers = { registerResizeListener: (dotNetObjRef) =&gt; { const handleResize = () =&gt; { dotNetObjRef.invokeMethodAsync('OnResize', window.innerWidth, window.innerHeight); }; window.addEventListener('resize', handleResize); // 立即触发一次，确保初始尺寸正确 handleResize(); // 返回清理函数（可选，用于取消订阅） return () =&gt; window.removeEventListener('resize', handleResize); } };</pre><H3>在 Blazor 组件中接收并响应尺寸变化 组件里需定义： - 两个字段存宽高（如 `<a style="color:#f60; text-decoration:underline;" title= "win" href="https://www.php.cn/zt/19041.html" target="_blank">windowWidth`, `windowHeight`） - 一个 `IDisposable` 引用（便于后续取消监听） - `[JSInvokable]` 方法 `OnResize` 接收 JS 调用 - 调用 `StateHasChanged()` 触发重渲染 <pre class='brush:razor;toolbar:false;'>@page &quot;/resize-demo&quot; @inject IJSRuntime JSRuntime &lt;p&gt;当前宽度: @windowWidth&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/ai/1072&quot; title=&quot;SoundRaw AI&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/ai_manual/001/503/042/68b6c94dbfc47596.png&quot; alt=&quot;SoundRaw AI&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/ai/1072&quot; title=&quot;SoundRaw AI&quot;&gt;SoundRaw AI&lt;/a&gt; &lt;p&gt;面向创作者的 AI 音乐生成器，只需选择情绪、流派和长度，SoundRaw AI就能为你生成优美的歌曲。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/ai/1072&quot; title=&quot;SoundRaw AI&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;p&gt;当前高度: @windowHeight&lt;/p&gt; &lt;button @onclick=&quot;StartListening&quot;&gt;开始监听&lt;/button&gt; &lt;button @onclick=&quot;StopListening&quot;&gt;停止监听&lt;/button&gt; @code { private int windowWidth; private int windowHeight; private IDisposable? resizeListener; private async Task StartListening() { if (resizeListener is null) { resizeListener = await JSRuntime.InvokeUnmarshalled&lt;IDisposable&gt;( &quot;blazorHelpers.registerResizeListener&quot;, DotNetObjectReference.Create(this)); } } private void StopListening() { resizeListener?.Dispose(); resizeListener = null; } [JSInvokable] public void OnResize(int width, int height) { windowWidth = width; windowHeight = height; StateHasChanged(); } }</pre><H3>注意几个关键细节 - 不要用 `InvokeAsync` 调用 `registerResizeListener`，它返回的是 JS 函数，而 `InvokeUnmarshalled` 更适合这种无 Promise 的同步注册场景 - 初始尺寸必须手动触发一次（比如在 `handleResize()` 里），否则组件首次加载时宽高为 0 - `DotNetObjectReference.Create(this)` 需要手动 `Dispose()`，否则可能引发内存泄漏；建议在 `Dispose(bool)` 中也做清理 - 如果只是做<a style="color:#f60; text-decoration:underline;" title= "响应式布局" href="https://www.php.cn/zt/23291.html" target="_blank">响应式布局判断（比如区分手机/桌面），可在 `OnResize` 里加断点逻辑，例如： <pre class='brush:csharp;toolbar:false;'>public bool IsMobile =&gt; windowWidth &lt; 768; public string DeviceClass =&gt; IsMobile ? &quot;mobile&quot; : &quot;desktop&quot;;</pre><p>基本上就这些。不需要引入第三方包，纯原生 Blazor + JS 互操作就能稳定工作。 </script>