当前位置: 首页 > news >正文

一文读懂WPF布局

WPF布局

    • 布局
      • WPF 布局的核心机制
      • 常用布局控件详解
        • Grid(网格布局)
        • StackPanel(堆叠布局)
        • DockPanel(停靠布局)
        • WrapPanel(自动换行布局)
        • Canvas(绝对定位布局)
        • UniformGrid(均布网格)
        • VirtualizingStackPanel 虚拟化技术
        • 布局对比
    • 布局设计原则

布局

WPF 布局的核心机制

WPF 布局基于布局面板(Panel) 和 测量/排列(Measure/Arrange) 机制:

  1. 测量(Measure):计算子元素所需的空间。
  2. 排列(Arrange):确定子元素最终的位置和大小。
  3. 自动适应:大多数布局控件支持动态调整子元素的位置和大小(基于内容或容器尺寸)

常用布局控件详解

Grid(网格布局)
  1. 核心功能:通过行(RowDefinition)和列(ColumnDefinition)定义网格,支持复杂的多区域布局。
  2. 关键属性:
    RowDefinitions/ColumnDefinitions:定义行和列(支持固定值、比例(*)、自动尺寸(Auto))。
    Grid.Row/Grid.Column:附加属性,设置子元素的位置
    Grid.RowSpan/Grid.ColumnSpan:合并单元格
    <Grid><Grid.RowDefinitions><!--定义三行--><RowDefinition Height="100"/><!-- 自动高度 --><RowDefinition Height="*"/><!-- 剩余空间占比 --><RowDefinition Height="2*"/><!-- 2倍剩余空间 --></Grid.RowDefinitions><Grid.ColumnDefinitions><!--定义两列--><ColumnDefinition Width="200"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions><Button Content="第一行合并俩列" Grid.Row="0" Grid.ColumnSpan="2"/><TextBox Grid.Row="1" Grid.Column="0" Text="第2行第1列合并2行" Grid.RowSpan="2"/><TextBox Grid.Row="1" Grid.Column="1" Text="第2行第2列" /><TextBox Grid.Row="2" Grid.Column="1" Text="第3行第2列" /></Grid>

在这里插入图片描述

StackPanel(堆叠布局)
  1. 核心功能:子元素按水平(Orientation=“Horizontal”)或垂直(Orientation=“Vertical”)方向依次排列。
  2. 适用场景:简单线性布局(如工具栏、菜单栏)
 <Grid><Grid.RowDefinitions><!--定义三行--><RowDefinition Height="100"/><!-- 自动高度 --><RowDefinition Height="*"/><!-- 剩余空间占比 --><RowDefinition Height="2*"/><!-- 2倍剩余空间 --></Grid.RowDefinitions><Grid.ColumnDefinitions><!--定义两列--><ColumnDefinition Width="300"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions><StackPanel Grid.Column="1" Orientation="Horizontal"><Button Content="New" Width="100"/><Button Content="Open" Width="100"/><Button Content="Save" Width="100"/></StackPanel><StackPanel Grid.Row="1" Orientation="Vertical"><TextBox  Text="1111"  Height="50"/><TextBox  Text="2222" Height="50" /></StackPanel><TextBox Grid.Row="1" Grid.Column="1" Text="第2行第2列" /><TextBox Grid.Row="2" Grid.Column="1" Text="第3行第2列" /></Grid>

在这里插入图片描述

DockPanel(停靠布局)
  1. 核心功能:子元素通过 DockPanel.Dock 附加属性停靠在容器的边缘。
  2. 关键属性:
    LastChildFill:最后一个子元素是否填充剩余空间(默认 True)
<Grid><Grid.RowDefinitions><!--定义三行--><RowDefinition Height="100"/><!-- 自动高度 --><RowDefinition Height="*"/><!-- 剩余空间占比 --><RowDefinition Height="2*"/><!-- 2倍剩余空间 --></Grid.RowDefinitions><Grid.ColumnDefinitions><!--定义两列--><ColumnDefinition Width="300"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions><DockPanel LastChildFill="True"><Button Content="Top" DockPanel.Dock="Top" Height="30"/><Button Content="Left" DockPanel.Dock="Left" Width="100"/><Button Content="Right" DockPanel.Dock="Right" Width="100"/><Button Content="Fill"/><!-- 填充剩余区域 --></DockPanel><StackPanel Grid.Column="1" Orientation="Horizontal"><Button Content="New" Width="100"/><Button Content="Open" Width="100"/><Button Content="Save" Width="100"/></StackPanel><StackPanel Grid.Row="1" Orientation="Vertical"><TextBox  Text="1111"  Height="50"/><TextBox  Text="2222" Height="50" /></StackPanel><TextBox Grid.Row="1" Grid.Column="1" Text="第2行第2列" /><TextBox Grid.Row="2" Grid.Column="1" Text="第3行第2列" />
</Grid>

在这里插入图片描述

WrapPanel(自动换行布局)
  1. 核心功能:子元素按顺序排列,空间不足时自动换行
  2. 适用场景:标签页、动态生成的内容列表
<Grid><Grid.RowDefinitions><!--定义三行--><RowDefinition Height="100"/><!-- 自动高度 --><RowDefinition Height="*"/><!-- 剩余空间占比 --><RowDefinition Height="2*"/><!-- 2倍剩余空间 --></Grid.RowDefinitions><Grid.ColumnDefinitions><!--定义两列--><ColumnDefinition Width="300"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions><DockPanel LastChildFill="True"><Button Content="Top" DockPanel.Dock="Top" Height="30"/><Button Content="Left" DockPanel.Dock="Left" Width="100"/><Button Content="Right" DockPanel.Dock="Right" Width="100"/><Button Content="Fill"/><!-- 填充剩余区域 --></DockPanel><StackPanel Grid.Column="1" Orientation="Horizontal"><Button Content="New" Width="100"/><Button Content="Open" Width="100"/><Button Content="Save" Width="100"/></StackPanel><StackPanel Grid.Row="1" Orientation="Vertical"><TextBox  Text="1111"  Height="50"/><TextBox  Text="2222" Height="50" /></StackPanel><TextBox Grid.Row="1" Grid.Column="1" Text="第2行第2列" /><TextBox Grid.Row="2" Grid.Column="1" Text="第3行第2列" /><WrapPanel Grid.Row="2" Width="150"><Button Content="Item1" Margin="2"/><Button Content="Item2" Margin="2"/><Button Content="Item3" Margin="2"/><Button Content="Item4" Margin="2"/></WrapPanel>
</Grid>

在这里插入图片描述

Canvas(绝对定位布局)
  1. 核心功能:通过 Canvas.Left、Canvas.Top 等附加属性直接指定子元素的坐标
  2. 适用场景:需要精确控制位置的场景(如绘图、游戏界面)
<Grid><Grid.RowDefinitions><!--定义三行--><RowDefinition Height="100"/><!-- 自动高度 --><RowDefinition Height="*"/><!-- 剩余空间占比 --><RowDefinition Height="2*"/><!-- 2倍剩余空间 --></Grid.RowDefinitions><Grid.ColumnDefinitions><!--定义两列--><ColumnDefinition Width="300"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions><DockPanel LastChildFill="True"><Button Content="Top" DockPanel.Dock="Top" Height="30"/><Button Content="Left" DockPanel.Dock="Left" Width="100"/><Button Content="Right" DockPanel.Dock="Right" Width="100"/><Button Content="Fill"/><!-- 填充剩余区域 --></DockPanel><StackPanel Grid.Column="1" Orientation="Horizontal"><Button Content="New" Width="100"/><Button Content="Open" Width="100"/><Button Content="Save" Width="100"/></StackPanel><StackPanel Grid.Row="1" Orientation="Vertical"><TextBox  Text="1111"  Height="50"/><TextBox  Text="2222" Height="50" /></StackPanel><TextBox Grid.Row="1" Grid.Column="1" Text="第2行第2列" /><WrapPanel Grid.Row="2" Width="150"><Button Content="Item1" Margin="2"/><Button Content="Item2" Margin="2"/><Button Content="Item3" Margin="2"/><Button Content="Item4" Margin="2"/></WrapPanel><Canvas Grid.Row="2" Grid.Column="1"><Rectangle Canvas.Left="50" Canvas.Top="20" Width="100" Height="60" Fill="Blue"/><Ellipse Canvas.Left="120" Canvas.Top="80" Width="80" Height="80" Fill="Red"/></Canvas>
</Grid>

在这里插入图片描述

UniformGrid(均布网格)
  1. UniformGrid 的核心概念
    UniformGrid 是 WPF 中的一种特殊布局控件,所有子元素会被均匀分配到相同大小的单元格中,且每个单元格的尺寸一致。它适用于需要等分空间的场景(如棋盘、按钮矩阵、图片缩略图等)
    在这里插入图片描述
  2. 关键属性详解
    Rows 和 Columns
    作用:手动指定行数和列数。若未设置,根据子元素数量和容器尺寸自动计算。
    自动计算规则:
    优先填满行(类似 Horizontal 方向的 WrapPanel)。
    行数 = ⌈子元素总数 / 列数⌉,列数 = ⌈子元素总数 / 行数⌉(取决于宽高比例)。
    FirstColumn
    作用:设置第一行的起始列(默认为0)。例如,若 FirstColumn=2,则第一行的第一个元素从第3列开始放置。
    UniformGrid.RowSpan 和 UniformGrid.ColumnSpan
    作用:允许子元素跨越多行或多列(类似 Grid 的 RowSpan/ColumnSpan)
<Grid><Grid.RowDefinitions><!--定义三行--><RowDefinition Height="100"/><!-- 自动高度 --><RowDefinition Height="*"/><!-- 剩余空间占比 --><RowDefinition Height="2*"/><!-- 2倍剩余空间 --></Grid.RowDefinitions><Grid.ColumnDefinitions><!--定义两列--><ColumnDefinition Width="300"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions><DockPanel LastChildFill="True"><Button Content="Top" DockPanel.Dock="Top" Height="30"/><Button Content="Left" DockPanel.Dock="Left" Width="100"/><Button Content="Right" DockPanel.Dock="Right" Width="100"/><Button Content="Fill"/><!-- 填充剩余区域 --></DockPanel><StackPanel Grid.Column="1" Orientation="Horizontal"><Button Content="New" Width="100"/><Button Content="Open" Width="100"/><Button Content="Save" Width="100"/></StackPanel><StackPanel Grid.Row="1" Orientation="Vertical"><TextBox  Text="1111"  Height="50"/><TextBox  Text="2222" Height="50" /></StackPanel><!-- 默认自动计算行列 --><UniformGrid Grid.Row="1" Grid.Column="1"><Button Content="1"/><Button Content="2"/><Button Content="3"/><Button Content="4"/><Button Content="5"/><Button Content="6"/><Button Content="7"/><Button Content="8"/></UniformGrid><WrapPanel Grid.Row="2" Width="150"><Button Content="Item1" Margin="2"/><Button Content="Item2" Margin="2"/><Button Content="Item3" Margin="2"/><Button Content="Item4" Margin="2"/></WrapPanel><Canvas Grid.Row="2" Grid.Column="1"><Rectangle Canvas.Left="50" Canvas.Top="20" Width="100" Height="60" Fill="Blue"/><Ellipse Canvas.Left="120" Canvas.Top="80" Width="80" Height="80" Fill="Red"/></Canvas>
</Grid>

在这里插入图片描述

  1. 与其他布局的对比
    在这里插入图片描述

  2. 应用场景
    5.

  3. 进阶使用
    1 结合数据绑定 显示图片库或商品列表,结合ItemsControl动态生成条目,实现等宽等高布局
    2 自定义单元格间距 注意:UniformGrid 没有内置的 Spacing 属性,需通过子元素的 Margin 或容器的 Padding 实现间距
    3 响应式布局 通过绑定动态调整列数,适配不同窗口尺寸

<ItemsControl ItemsSource="{Binding ImageItems}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><UniformGrid Columns="5"/>  <!-- 每行5--></ItemsPanelTemplate></ItemsControl.ItemsPanel>
</ItemsControl>
<!-- 通过 Margin 模拟间距 -->
<UniformGrid><Button Content="1" Margin="2"/><Button Content="2" Margin="2"/><Button Content="3" Margin="2"/>
</UniformGrid><!-- 或通过 Padding 控制整体边距 -->
<UniformGrid Padding="5"><!-- 子元素 -->
</UniformGrid>
<UniformGrid Columns="{Binding ColumnCount}"><!-- 动态列数 -->
</UniformGrid>
  1. 注意事项
    性能:子元素数量过多时,优先使用虚拟化面板(如 VirtualizingStackPanel),但 UniformGrid 本身不支持虚拟化。
    尺寸约束:若容器尺寸未明确指定(如未设置 Width/Height),可能因自动布局计算导致渲染异常。
    跨平台兼容性:UniformGrid 是 WPF 原生控件,在 UWP 或 MAUI 中需使用替代方案(如 Grid 均分行列)
VirtualizingStackPanel 虚拟化技术
  1. 什么是虚拟化技术
    WPF 中一种特殊的布局容器,专为大数据量列表控件​​(如 ListBox、ListView、DataGrid)设计,通过 ​​虚拟化技术(Virtualization)​​ 优化性能。其核心思想是:​​仅渲染当前可视区域的子元素​​,而非一次性加载所有数据项,从而大幅减少内存占用和渲染开销
    说白了就是相当于分页一样只展示分页内容 而不是全部内容
  2. 虚拟化的工作机制​​
    ​​可视区域计算​​
    根据容器大小和滚动条位置,计算当前需要显示的数据范围(如索引 0~19)。
    ​​动态生成 UI​​
    仅为可视范围内的数据项生成 UI 元素,其余项保持为 ​​逻辑占位符​​。
    ​​滚动时复用​​
    当用户滚动列表时:
    移除移出可视区域的 UI 元素。
    将新进入可视区域的数据绑定到复用的 UI 元素上(避免重复创建)
布局对比

在这里插入图片描述

布局设计原则

  1. 先整体后局部
    整体框架:用 Grid 划分界面的大区域(如顶部导航栏、侧边栏、主内容区)。
    局部细节:在 Grid 的单元格内嵌套其他布局控件(如 StackPanel、UniformGrid)处理子元素排列。

  2. 避免过度嵌套
    性能优化:嵌套层级越深,布局计算越复杂,尽量保持层级扁平。
    可维护性:嵌套过多会降低代码可读性,优先用 Grid 的行列定义替代多层 StackPanel。

  3. 善用布局特性
    自动尺寸:利用 Auto(根据内容自适应)和 *(按比例分配剩余空间)优化布局。
    内容驱动:优先让子元素决定自身大小(如 WrapPanel 自动换行、StackPanel 线性排列)

<Grid><Grid.RowDefinitions><RowDefinition Height="Auto"/><!-- 标题 --><RowDefinition Height="*"/><!-- 表单内容 --><RowDefinition Height="Auto"/><!-- 操作栏 --></Grid.RowDefinitions><!-- 标题 --><TextBlock Text="用户注册" FontSize="16" Grid.Row="0" Margin="10"/><!-- 表单内容:嵌套 Grid --><Grid Grid.Row="1" Margin="10"><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><!-- 表单项 --><TextBlock Text="用户名:" Grid.Row="0" Grid.Column="0"/><TextBox Grid.Row="0" Grid.Column="1" Margin="5"/><TextBlock Text="密码:" Grid.Row="1" Grid.Column="0"/><PasswordBox Grid.Row="1" Grid.Column="1" Margin="5"/><TextBlock Text="性别:" Grid.Row="2" Grid.Column="0"/><StackPanel Grid.Row="2" Grid.Column="1" Orientation="Horizontal" Margin="5"><RadioButton Content="男" GroupName="Gender"/><RadioButton Content="女" GroupName="Gender" Margin="10,0,0,0"/></StackPanel><TextBlock Text="内容:" Grid.Row="3" Grid.Column="0"/><UniformGrid Grid.Row="3" Grid.Column="1" Columns="3" Margin="5"><TextBlock  Text="123"/><TextBlock Text="456"/></UniformGrid></Grid><!-- 操作栏:水平排列按钮 --><StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right" Margin="10"><Button Content="提交" Width="80" Margin="0,0,10,0"/><Button Content="取消" Width="80"/></StackPanel>
</Grid>

在这里插入图片描述

相关文章:

一文读懂WPF布局

WPF布局 布局WPF 布局的核心机制常用布局控件详解Grid&#xff08;网格布局&#xff09;StackPanel&#xff08;堆叠布局&#xff09;DockPanel&#xff08;停靠布局&#xff09;WrapPanel&#xff08;自动换行布局&#xff09;Canvas&#xff08;绝对定位布局&#xff09;Unif…...

【Docker基础-网络】--查阅笔记4

目录 Docker 网络网络类型none 网络host 网络bridge 网络自定义网络 容器间通信IP 通信Docker DNS Serverjoined 容器 容器与外部通信容器访问外部外部访问容器 Docker 网络 学习Docker提供的几种原生网络如何创建自定义网络容器间通信&#xff0c;容器于外界交互 Docker 安装…...

FacialExpressionDetection的conda虚拟环境搭建Window

安装conda的URL&#xff1a;Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 清华源下载conda版本&#xff0c;哪个最新用哪个&#xff0c;这里下载Anaconda3-5.3.1-Windows-x86_64.exe版本 安装conda虚拟环境 conda create --name py1…...

IPD推进中关键角色与岗位(七)LTDT确保技术开发的实用性与可靠性,满足市场需求

IPD 体系作为一种先进的研发管理模式&#xff0c;其核心在于打破传统职能部门的壁垒&#xff0c;通过跨部门团队的协同合作&#xff0c;实现产品开发的全流程优化。在 IPD 体系的架构中&#xff0c;存在着多个关键团队&#xff0c;它们各司其职又紧密配合&#xff0c;共同推动产…...

c++自学笔记——字符串与指针

字符串与指针 1. 字符串基础 字符串的定义&#xff1a;字符的序列&#xff0c;通常用来表示文本。 字符串字面量&#xff08;String Literal&#xff09;是在程序中直接用双引号括起来的文本序列。字符串字面量的类型是 const char*&#xff0c;即指向字符常量的指针。字符串…...

Jmeter分布式测试启动

代理客户端配置 打开jmeter.properties文件&#xff0c;取消注释并设置端口&#xff08;如server_port1099&#xff09;&#xff0c; 并添加server.rmi.ssl.disabletrue禁用SSL加密。 &#xff08;Linux系统&#xff09;修改jmeter-server文件中的RMI_HOST_DEF为代理机实际IP。…...

.DS_Store文件泄露、.git目录泄露、.svn目录泄露漏洞利用工具

&#x1f409;工具介绍 一款图形化的 .DS_Store文件泄露、.git目录泄露、.svn目录泄露漏洞利用工具。 &#x1f3af;使用 本工具使用Python3 PyQt5开发&#xff0c;在开始使用前&#xff0c;请确保已经安装了相关模块&#xff1a; pip3 install -r requirements.txt -i ht…...

Coze+大模型智能体环境搭建

1 前言 Coze作为字节跳动推出的新一代AI Bot开发平台&#xff0c;为开发者提供了快速构建、部署智能对话代理的一站式解决方案。Coze平台通过提供可视化工作流编排、知识库集成、插件扩展等核心功能&#xff0c;结合一些大模型&#xff0c;例如豆包、deepseek、通义千问等大模型…...

计算机视觉与深度学习 | 视觉SLAM学习思路总结与视觉SLAM发展历程(1986年至2025年)

视觉SLAM(Simultaneous Localization and Mapping,同时定位与建图)是计算机视觉和机器人领域的重要研究方向,涉及数学、几何、优化、传感器融合等多学科知识。以下是学习视觉SLAM的系统化思路总结,适合从入门到进阶的学习路径:视觉SLAM学习思路总结 一、基础准备 数学基…...

Ansible(8)——循环与条件任务

目录 一、循环迭代任务&#xff1a; 1、简单循环&#xff1a; 2、循环字典列表&#xff1a; 3、Ansible 2.5 之前的循环关键字&#xff1a; 4、在循环中使用 register 变量&#xff1a; 二、条件任务&#xff1a; 1、使用条件句的常见场景&#xff1a; 2、条件任务语法…...

搭建Trae+Vue3的AI开发环境

从2024年2025年&#xff0c;不断的有各种AI工具会在自媒体中火起来&#xff0c;号称各种效率王炸&#xff0c;而在AI是否会替代打工人的话题中&#xff0c;程序员又首当其冲。 作为一个后端开发&#xff0c;这篇文章基于Trae工具&#xff0c;来创建和运行一个简单的Vue前端应用…...

【免费公测】可遇AI直播/无人直播/矩阵直播/AI场控

前言 经过了一个多月的内测打磨&#xff0c;实现了非常稳定的无人直播效果&#xff0c;AI直播语音及其真实&#xff0c;软件交互方便&#xff0c;可以快速的构建AI直播间。 免费公测&#xff0c;内置无限激活卡密一张&#xff0c;打开即用。 亮点 高仿真语音模型&#xff0c…...

大数据Hadoop(MapReduce)

MapReduce概述 MapReduce定义 MapReduce是一个分布式运算程序的编程框架&#xff0c;是用户开发“基于Hadoop的数据分析应用”的核心框架。 MapReduce核心功能是将用户编写的业务逻辑代码和自带默认组件整合成一个完整的分布式运算程序&#xff0c;并发运行在一个Hadoop集群上…...

使用apache-jmeter时,控制台打不开应用的解决方法

运行jmeter.bat的时候&#xff0c;提示&#xff1a; findstr 不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。 Not able to find Java executable or version. Please check your Java installation. errorlevel2这个错误信息表明系统无法识别 findstr 命令…...

leetcode 74. 搜索二维矩阵

class Solution {public boolean searchMatrix(int[][] matrix, int target) {int m matrix.length;int n matrix[0].length;int l 0;int r n * m - 1; // 记得减一while (l < r) {int mid (l r) / 2;if(matrix[mid / n][mid % n] > target) {r mid - 1;} else if…...

函数式编程在 Java:Function、BiFunction、UnaryOperator 你真的会用?

大家好&#xff0c;我是你们的Java技术博主&#xff01;今天我们要深入探讨Java函数式编程中的几个核心接口&#xff1a;Function、BiFunction和UnaryOperator。很多同学虽然知道它们的存在&#xff0c;但真正用起来却总是不得要领。这篇文章将带你彻底掌握它们&#xff01;&am…...

SpringMVC基础一(SpringMVC运行原理)

先了解MVC&#xff0c;在JavaWeb基础五中。 回忆servlet&#xff0c;在javaweb基础二中。 创建一个web项目&#xff1a; 1、新建maven项目&#xff0c;导入依赖。&#xff08;junit、springmvc、spring-webmvc、servlet-api、jsp-api、jstl&#xff09; <groupId>org…...

libva之ffavdemo分析

ffavdemo 代码库实现了一个基于FFmpeg和VAAPI的硬件加速视频解码与渲染框架&#xff0c;主要用于演示视频解码与渲染的完整硬件加速流程。支持多种渲染后端&#xff08;X11、DRM、EGL&#xff09;&#xff0c;适应不同显示环境。包含视频处理过滤器&#xff0c;可进行格式转换和…...

从零开始写android 的智能指针

Android中定义了两种智能指针类型&#xff0c;一种是强指针sp&#xff08;strong pointer&#xff09;&#xff0c;源码中的位置在system/core/include/utils/StrongPointer.h。另外一种是弱指针&#xff08;weak pointer&#xff09;。其实称之为强引用和弱引用更合适一些。强…...

Spark-SQL 之 Window

window 函数实例 select concat(substr(p_dt,1,4),substr(p_dt,6,2)...

Python设计模式-单例模式

一、单例模式核心思想 单例模式&#xff08;Singleton Pattern&#xff09;是一种创建型设计模式&#xff0c;它确保一个类只有一个实例&#xff0c;并提供一个全局访问点。该模式主要解决以下问题&#xff1a; 资源控制&#xff08;如数据库连接池&#xff09;配置信息全局一…...

富文本编辑器的内容导出html,并保留图片

富文本编辑器的上传的图片默认转为base64&#xff0c;但是如果需要保存到数据库&#xff0c;base64的数据就太大了&#xff0c;所以一般都会长传到文件服务器&#xff0c;然会返回图片url。 但是当我们需要把富文本编辑器的内容导出为html时&#xff0c;因为图片时url,当浏览器…...

jQueryHTML与插件

1.jQuery 事件机制 1.1 注册事件 bind()、on()方法向被选元素添加一个或多个事件处理程序&#xff0c;以及当事件发生时运行的函数 $("p").on({"click": function () {alert("点击了")},"mouseenter": function () {…...

KTH5772 系列游戏手柄摇杆专用3D 霍尔位置传感器

产品概述 KTH5772是一款专为游戏手柄上的摇杆应用而设计的3D霍尔磁感应芯片&#xff0c;主要面向对线性度、回报率、灵敏度、功耗要求严格的摇杆应用。KTH5772基于3D霍尔技术&#xff0c;内部分别集成了X轴、Y轴和Z轴三个独立的霍尔元件&#xff0c;能够通过测量和处理磁通密度…...

C++进阶——C++11_右值引用和移动语义_可变参数模板_类的新功能

目录 1、右值引用和移动语义 1.1 左值和右值 1.2 左值引用和右值引用 1.3 引用延长生命周期 1.4 左值和右值的参数匹配 1.5 右值引用和移动语义的使用场景 1.5.1 左值引用主要使用场景 1.5.2 移动构造和移动赋值 1.5.3 右值引用和移动语义解决传值返回问题 1.5.4 右值…...

(五)深入了解AVFoundation-播放:多音轨、字幕、倍速播放与横竖屏切换

引言 在之前的博客中&#xff0c;我们已经实现了一个相对完整的播放器&#xff0c;具备了基本功能&#xff0c;如播放、暂停、播放进度显示和拖拽快进等。这为我们提供了一个坚实的基础。接下来&#xff0c;我们将进一步扩展播放器的功能&#xff0c;使其更具灵活性和实用性&a…...

matplotlib.pyplot常见图形及组合基础用法文档

matplotlib.pyplot 常见图形及组合基础用法文档 一、引言 matplotlib.pyplot 是 Python 中用于数据可视化的强大库&#xff0c;提供了丰富的绘图函数&#xff0c;可绘制折线图、散点图、柱状图等多种类型的图形。同时&#xff0c;还能将不同类型的图形组合在一起&#xff0c;…...

mysql的基础语句和外键查询及其语句

思路&#xff1a;双指针思路可以吗&#xff0c;我就直接找G,如果后一个是1就cnt&#xff0c;如果不是数字&#xff0c;用一个指针i指向G&#xff0c;另一个指针j移动&#xff0c;当不是G时停止&#xff0c;统计G的个数&#xff0c;如果是奇数个同时G的下一个是1&#xff0c;cnt…...

如何使用 DeepSeek 帮助自己的工作?

1. 信息检索 信息检索是获取特定信息的过程&#xff0c;尤其是在大量数据或文本中查找相关内容。这个过程应用广泛&#xff0c;从网页搜索引擎到数据库查询&#xff0c;再到企业内部信息系统。在使用 DeepSeek 或其它类似工具进行信息检索时&#xff0c;可以考虑以下几个重要方…...

为 Doub 打造吸引 CMO 的 SEO 报告

在数字营销中&#xff0c;SEO 报告不仅是展示工作成果的工具&#xff0c;更是向高层管理者&#xff08;如 CMO&#xff09;证明 SEO 价值的关键。对于 Doub 这样一家提供精密模切解决方案的网站&#xff08;基于 WordPress 和 WooCommerce&#xff09;&#xff0c;撰写一份吸引…...

数据可视化 —— 折线图应用(大全)

一、导入需要的库 # Matplotlib 是 Python 最常用的绘图库&#xff0c;pyplot 提供了类似 MATLAB 的绘图接口 import matplotlib.pyplot as plt import numpy as np import pandas as pd 二、常用的库函数 plt.plot(x轴,y轴)&#xff1a;plot()是画折线图的函数。 plt.xlabe…...

配置mac mini M4 的一些软件

最近更换了 mac mini M4 &#xff0c;想要重新下载配置软件 &#xff0c;记录一下。 Homebrew是什么&#xff1f; homebrew是一款Mac OS平台下的软件包管理工具&#xff0c;拥有安装、卸载、更新、查看、搜索等功能。通过简单的指令可以实现包管理&#xff0c;而不用关心各种…...

八邻域轮廓跟踪算法_传感器技术

在科学技术日新月异的今天&#xff0c;人们对机器设备的智能性、自主性要求也越来越高&#xff0c;希望其完全替代人的角色&#xff0c;把人们从繁重、危险的工作任务中解脱出来&#xff0c;而能否像人一样具有感知周围环境的能力已成为设备实现智能化自主化的关键。 广义的“…...

python实战:如何正确安装 ffmpeg(window、linux、mac都通用)

直接使用 Conda 安装 FFmpeg,而无需手动下载或配置环境变量。Conda 会自动管理依赖项,并将 FFmpeg 添加到你的环境路径中。 方法 1:使用 Conda 安装 FFmpeg 在 Anaconda Prompt(或终端)中运行: conda install ffmpeg -c conda-forge-c conda-forge 表示从 conda-forge…...

网络机顶盒常见问题全解析:从安装到故障排除

WiFi连接问题 机顶盒无法连接WiFi&#xff0c;先检查路由器信号强度。若信号弱&#xff0c;可将机顶盒移近路由器&#xff0c;或调整路由器天线方向。也可重启机顶盒与路由器&#xff0c;若仍不行&#xff0c;进入机顶盒设置&#xff0c;重置网络设置。若支持5GHz频段&#xf…...

使用stm32cubeide stm32f407 lan8720a freertos lwip 实现tcp客户端、服务端及网络数据转串口数据过程详解

1前言 项目需要使用MCU实现网络功能&#xff0c;后续确定方案stm32f407 外接lan8720a实现硬件平台搭建&#xff0c;针对lan8720a也是用的比较多的phy&#xff0c;网上比较多的开发板&#xff0c;硬件上都是选用了这个phy&#xff0c;项目周期比较短&#xff0c;选用了这个常用…...

GAT-GRAPH ATTENTION NETWORKS(论文笔记)

CCF等级&#xff1a;A 发布时间&#xff1a;2018年 代码位置 25年4月21日交 目录 一、简介 二、原理 1.注意力系数 2.归一化 3.特征组合与非线性变换 4.多头注意力 4.1特征拼接操作 4.2平均池化操作 三、实验性能 四、结论和未来工作 一、简介 图注意力网络&…...

【蓝桥杯】贪心算法

1. 区间调度 1.1. 题目 给定个区间,每个区间由开始时间start和结束时间end表示。请选择最多的互不重叠的区间,返回可以选择的区间的最大数量。 输入格式: 第一行包含一个整数n,表示区间的数量 接下来n行,每行包含两个整数,分别表示区间的开始时间和结束时间 输出格式:…...

从一批视频里面抽取固定的第n帧图片(包含并行实现)

以下代码主要用于从 ./*.mp4 的文件夹中&#xff0c;每个视频中抽取第N帧保存成图&#xff0c;用于图生视频训练&#xff0c;考虑到数据量比较大&#xff0c;推荐使用ffmpeg来实现的&#xff0c;性能可以比较高&#xff08;10w个视频差不多十多分钟就可以跑完&#xff09;&…...

论文阅读:2024-arxiv How to Steer LLM Latents for Hallucination Detection?

总目录 大模型安全相关研究&#xff1a;https://blog.csdn.net/WhiffeYF/article/details/142132328 How to Steer LLM Latents for Hallucination Detection? https://arxiv.org/pdf/2503.01917 https://www.doubao.com/chat/2818934852496130 其它资料&#xff1a; http…...

python面试技巧

文章目录 前言面试前面试中良好的沟通表达展示解决问题的能力体现学习能力和热情注意非语言沟通 面试后 前言 在 Python 面试中&#xff0c;掌握一些有效的技巧能让你更好地展现自己的能力和素质&#xff0c;以下是一些实用的面试技巧&#xff1a; 面试前 研究公司和岗位&…...

免费AI编程插件Fitten Code + IntelliJ IDEA实现AI辅助编程实战指南

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家、CSDN平台优质创作者&#xff0c;高级开发工程师&#xff0c;数学专业&#xff0c;拥有高级工程师证书&#xff1b;擅长C/C、C#等开发语言&#xff0c;熟悉Java常用开发技术&#xff0c;能熟练应用常用数据库SQL server,Oracle…...

Vue3 + TypeScript 的 Hooks 实用示例

示例 1: 防抖 Hook&#xff08;useDebounce&#xff09; typescript // hooks/useDebounce.ts import { ref, watch, onUnmounted, type WatchSource } from vue;/*** 防抖 Hook* param source 监听的响应式数据源* param callback 防抖后执行的回调函数* param delay 防抖延…...

【DB2】事务日志满/归档占用较大问题处理记录

某DB2环境经常报错The active log is full and is held by...&#xff0c;并且归档磁盘占用较大 事务日志满 事务日志满可以理解为Oracle的redo追尾&#xff0c;即业务写入量大于redo刷盘速度&#xff0c;这时候其他SQL会陷入等待&#xff0c;容易造成性能问题 一般由两方面原…...

Rust 的征服:从系统编程到全栈开发的 IT 新宠

文章目录 Rust 的本质&#xff1a;性能与安全的完美平衡Rust 的演进&#xff1a;从 Mozilla 的实验到全球热潮核心技术&#xff1a;Rust 的杀手锏与生态所有权与生命周期高并发&#xff1a;无畏线程Cargo&#xff1a;现代构建工具生态繁荣&#xff1a;Crates.io Rust 的杀手级应…...

【力扣hot100题】(086)乘积最大子数组

感觉题目越来越难&#xff0c;这题不看答案真的想不到一点。 一开始绕了不少弯路&#xff0c;甚至想将每一个子数组的积全部求出来比较…… 答案的方法有点难懂。 方法如下&#xff1a;维护两个数&#xff0c;分别是目前为止最大数和最小数&#xff0c;最大数一般来说是正数…...

编译器bug ?

## 问题描述 两个结构几乎相同的模板实现&#xff0c;一个能正常工作&#xff0c;另一个在 VS2019 和 GCC 中都会报错。 ## 最小化测试代码 // bug_report.cpp #include <type_traits> #include <string>template<typename T> struct Type2Type { using t…...

算法刷题记录——LeetCode篇(1.8) [第71~80题](持续更新)

更新时间&#xff1a;2025-04-10 算法题解目录汇总&#xff1a;算法刷题记录——题解目录汇总技术博客总目录&#xff1a;计算机技术系列博客——目录页 优先整理热门100及面试150&#xff0c;不定期持续更新&#xff0c;欢迎关注&#xff01; 72. 编辑距离 给你两个单词 wo…...

leetcode68.左右文本对齐

思路源自 leetcode-字符串篇 68题 文本左右对齐 难度高的模拟类型题目&#xff0c;关键点在于事先知道有多少单词要放在本行并且还要知道本行是不是最后一行&#xff08;最后一行需要全部单空格右对齐&#xff0c;不是最后一行就空格均摊&#xff09;&#xff0c;非最后一行的空…...

leetcode:905. 按奇偶排序数组(python3解法)

难度&#xff1a;简单 给你一个整数数组 nums&#xff0c;将 nums 中的的所有偶数元素移动到数组的前面&#xff0c;后跟所有奇数元素。 返回满足此条件的 任一数组 作为答案。 示例 1&#xff1a; 输入&#xff1a;nums [3,1,2,4] 输出&#xff1a;[2,4,3,1] 解释&#xff1a…...