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

[UI5 常用控件] 05.FlexBox, VBox,HBox,HorizontalLayout,VerticalLayout

news 2026/3/31 10:52:06

文章目录

  • 前言
  • 1. FlexBox布局控件
    • 1.1 alignItems 对齐模式
    • 1.2 justifyContent 对齐模式
    • 1.3 Direction
    • 1.4 Sort
    • 1.5 Render Type
    • 1.6 嵌套使用
    • 1.7 组件等高显示
  • 2. HBox,VBox
  • 3. HorizontalLayout，VerticalLayout

前言

本章节记录常用控件FlexBox,VBox,HBox,HorizontalLayout,VerticalLayout。
其路径分别是：

  • sap.m.FlexBox
  • sap.m.VBox
  • sap.m.HBox
  • sap.ui.layout.HorizontalLayout
  • sap.ui.layout.VerticalLayout

1. FlexBox布局控件

FlexBox布局控件经常用在页面的布局。

1.1 alignItems 对齐模式

  • 常用的有Start，Center，End
    在这里插入图片描述
  • View
	<PanelheaderText="alignItems 对齐模式"class="sapUiLargeMarginBottom"><HBox><Panel headerText="Start"><FlexBoxalignItems="Start"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="Center"><FlexBoxalignItems="Center"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="End"><FlexBoxalignItems="End"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel></HBox></Panel>

1.2 justifyContent 对齐模式

  • 常用的有Start,Center,End,SpaceAround,SpaceBetween
    在这里插入图片描述

  • View

	<PanelheaderText="justifyContent 对齐模式"class="sapUiLargeMarginBottom"><HBox><Panel headerText="Start"><FlexBoxjustifyContent="Start"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="Center"><FlexBoxjustifyContent="Center"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="End"><FlexBoxjustifyContent="End"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="SpaceAround"><FlexBoxjustifyContent="SpaceAround"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="SpaceBetween"><FlexBoxjustifyContent="SpaceBetween"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel></HBox></Panel>

1.3 Direction

  • 常用的有Row,RowReverse,Column,ColumnReverse

在这里插入图片描述

  • View
	<PanelheaderText="Direction"class="sapUiLargeMarginBottom"><HBox><Panel headerText="Row"><FlexBoxdirection="Row"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="RowReverse"><FlexBoxdirection="RowReverse"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="Column"><FlexBoxdirection="Column"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="ColumnReverse"><FlexBoxdirection="ColumnReverse"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel></HBox></Panel>

1.4 Sort

  • 可以排序Box内的组件( layoutData->FlexItemData ）
    在这里插入图片描述
  • View
   <PanelheaderText="Sort"class="sapUiLargeMarginBottom"><HBox><Panel headerText="Order in Row"><FlexBoxdirection="Row"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"><layoutData><FlexItemData order="2" /></layoutData></Button><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"><layoutData><FlexItemData order="3" /></layoutData></Button><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"><layoutData><FlexItemData order="1" /></layoutData></Button></FlexBox></Panel><Panel headerText="Order in Column"><FlexBoxdirection="Column"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"><layoutData><FlexItemData order="3" /></layoutData></Button><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"><layoutData><FlexItemData order="1" /></layoutData></Button><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"><layoutData><FlexItemData order="2" /></layoutData></Button></FlexBox></Panel></HBox></Panel>

1.5 Render Type

  • 常用的有Div,Bare,List
    在这里插入图片描述
  • View
  <PanelheaderText="Render Type"class="sapUiLargeMarginBottom"><HBox><Panel headerText="Div"><FlexBoxrenderType="Div"class="borderStyle"width="320px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="3" /></layoutData></Button><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="2" /></layoutData></Button><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="1" /></layoutData></Button></FlexBox></Panel><Panel headerText="Bare"><FlexBoxrenderType="Bare"class="borderStyle"width="320px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="3" /></layoutData></Button><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="2" /></layoutData></Button><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="1" /></layoutData></Button></FlexBox></Panel><Panel headerText="List"><FlexBoxrenderType="List"class="borderStyle"width="320px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="3" /></layoutData></Button><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="2" /></layoutData></Button><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="1" /></layoutData></Button></FlexBox></Panel></HBox></Panel>

1.6 嵌套使用

在这里插入图片描述

  • View
  <PanelheaderText="FlexItemData growFactor"class="sapUiLargeMarginBottom"><HBoxfitContainer="true"alignItems="Stretch"class="sapUiSmallMargin nestedFlexboxes"><core:HTML content="&lt;h2&gt;1&lt;/h2&gt;"><core:layoutData><FlexItemDatagrowFactor="2"styleClass="item1"/></core:layoutData></core:HTML><core:HTML content="&lt;h2&gt;2&lt;/h2&gt;"><core:layoutData><FlexItemDatagrowFactor="3"styleClass="item2"/></core:layoutData></core:HTML><VBox fitContainer="true"><layoutData><FlexItemData growFactor="7" /></layoutData><core:HTML content="&lt;h2&gt;3&lt;/h2&gt;"><core:layoutData><FlexItemDatagrowFactor="5"styleClass="item3"/></core:layoutData></core:HTML><HBoxfitContainer="true"alignItems="Stretch"><layoutData><FlexItemData growFactor="3" /></layoutData><core:HTML content="&lt;h2&gt;4&lt;/h2&gt;"><core:layoutData><FlexItemDatagrowFactor="1"styleClass="item4"/></core:layoutData></core:HTML><core:HTML content="&lt;h2&gt;5&lt;/h2&gt;"><core:layoutData><FlexItemDatagrowFactor="1"styleClass="item5"/></core:layoutData></core:HTML></HBox></VBox><core:HTML content="&lt;h2&gt;6&lt;/h2&gt;"><core:layoutData><FlexItemDatagrowFactor="5"styleClass="item6"/></core:layoutData></core:HTML></HBox></Panel>

1.7 组件等高显示

在这里插入图片描述

  • View
  <PanelheaderText="组件等高"class="sapUiLargeMarginBottom"><HBox class="sapUiLargeMarginBottom customPanel"><FlexBox><Texttext="Although they have different amounts of text, both columns are of equal height."><layoutData><FlexItemDatagrowFactor="1"baseSize="0"backgroundDesign="Solid"styleClass="sapUiTinyMargin"/></layoutData></Text><Texttext="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo hey nonny no duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."><layoutData><FlexItemDatagrowFactor="2"baseSize="0"backgroundDesign="Solid"styleClass="sapUiTinyMargin"/></layoutData></Text></FlexBox></HBox></Panel>

2. HBox,VBox

HBox,VBox是FlexBox的子类，可以直接使用并实现横向布局和竖向布局
在这里插入图片描述

  • View
   <PanelheaderText="HBox  VBox"class="sapUiLargeMarginBottom"><HBox><Panel headerText="HBox"><HBoxclass="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></HBox></Panel><Panel headerText="VBox"><VBoxclass="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></VBox></Panel></HBox></Panel>

3. HorizontalLayout，VerticalLayout

这两个组件类似与HBox和VBox，主要区别是HorizontalLayout无法设置宽高属性，VerticalLayout无法设置高属性

在这里插入图片描述

  • View
	<PanelheaderText="HorizontalLayout,VerticalLayout"class="sapUiLargeMarginBottom"><HBox><Panel headerText="HorizontalLayout"><l:HorizontalLayoutclass="borderStyle"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></l:HorizontalLayout></Panel><Panel headerText="VerticalLayout"><l:VerticalLayoutclass="borderStyle"width="220px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></l:VerticalLayout></Panel></HBox></Panel>

相关文章：

[UI5 常用控件] 05.FlexBox, VBox,HBox,HorizontalLayout,VerticalLayout

文章目录 前言1. FlexBox布局控件1.1 alignItems 对齐模式1.2 justifyContent 对齐模式1.3 Direction1.4 Sort1.5 Render Type1.6 嵌套使用1.7 组件等高显示 2. HBox,VBox3. HorizontalLayout&#xff0c;VerticalLayout 前言 本章节记录常用控件FlexBox,VBox,HBox,Horizontal…...

编程日记 2024/2/7 1:02:49

Unity类银河恶魔城学习记录1-14 AttackDirection源代码 P41

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili PlayerPrimaryAttackState.cs using System.Collections; using System.Co…...

编程日记 2024/2/7 0:58:45

DataX详解和架构介绍

系列文章目录 一、 DataX详解和架构介绍 二、 DataX源码分析 JobContainer 三、DataX源码分析 TaskGroupContainer 四、DataX源码分析 TaskExecutor 五、DataX源码分析 reader 六、DataX源码分析 writer 七、DataX源码分析 Channel 文章目录 系列文章目录DataX是什么&#xff…...

编程日记 2024/2/7 0:57:44

02.05

1.单链表 main #include "1list_head.h" int main(int argc, const char *argv[]) { //创建链表之前链表为空Linklist headNULL;int n;datatype element;printf("please enter n:");scanf("%d",&n);for(int i0;i<n;i){printf("ple…...

编程日记 2024/2/7 0:56:43

【C语言】贪吃蛇 详解

该项目需要的技术要点 C语言函数、枚举、结构体、动态内存管理、预处理指令、链表、Win32API等。 由于篇幅限制 和 使知识模块化&#xff0c; 若想了解 使用到的 Win32API 的知识&#xff1a;请点击跳转&#xff1a;【Win32API】贪吃蛇会使用到的 Win32API 目录 1. 贪吃蛇游…...

编程日记 2024/2/7 0:55:42

Mysql MGR搭建

一、架构说明 1.1 架构概述 MGR(单主)VIP架构是一种分布式数据库架构&#xff0c;其中数据库系统采用单主复制模式&#xff0c; 同时引入虚拟IP(VIP)来提高可用性和可扩展性。 这种架构结合了传统主从复制和虚拟IP技术的优势&#xff0c;为数据库系统提供了高可用、 高性能和…...

编程日记 2024/2/7 0:54:41

新火种AI|寒武纪跌落神坛！七年连亏50亿，AI芯片第一股不行了吗？

作者&#xff1a;文子 编辑&#xff1a;小迪 连年亏损&#xff0c;烧钱不止&#xff0c;寒武纪终是走到悬崖边缘。 寒武纪市值腰斩&#xff0c;连续七年累亏50亿 继连续六年亏损之后&#xff0c;寒武纪又迎来第七年亏损。 1月30日晚&#xff0c;寒武纪正式对外发布2023年年…...

编程日记 2024/2/7 0:51:38

three.js CSS3DObject、CSS2DObject、CSS3DSprite、Sprite的作为标签的区别

CSS3DObject、CSS2DObject、CSS3DSprite、Sprite的作为标签的区别 是否面向相机场景缩放时&#xff0c;是否会跟随是否会被模型遮挡CSS2DObject是否否CSS3DObject否是否CSS3DSprite是是是Sprite是是是 CSS3DObject 和 CSS3DRenderer 搭配来渲染标签&#xff1b; CSS2DObject …...

编程日记 2024/2/7 0:50:37

第7节、双电机直线运动【51单片机+L298N步进电机系列教程】

↑↑↑点击上方【目录】&#xff0c;查看本系列全部文章 摘要&#xff1a;前面章节主要介绍单个电机控制&#xff0c;本节内容介绍两个电机完成Bresenham直线运动 一、Bresenham直线算法介绍 Bresenham直线算法由Jack Elton Bresenham于1962年在IBM开发&#xff0c;最初用于计…...

编程日记 2024/2/7 0:48:33

【C语言 - 哈希表 - 力扣 - 相交链表】

相交链表题目描述 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0…...

编程日记 2024/2/7 0:46:31

C++参悟：内存管理-unique_ptr

内存管理-unique_ptr 一、概述二、成员函数1. 构造、析构函数函数1. 构造函数2. 析构函数3. 赋值号 2. 修改器1. release&#xff08;&#xff09;2. reset()3. swap() 3. 观察器1. get()2. get_deleter3. bool 运算 一、概述 std::unique_ptr 是通过指针占有并管理另一对象&a…...

编程日记 2024/2/7 0:45:29

【征稿已开启】第五大数据、人工智能与软件工程国际研讨会（ICBASE 2024）

第五大数据、人工智能与软件工程国际研讨会&#xff08;ICBASE 2024&#xff09; 2024 5th International Conference on Big Data & Artificial Intelligence & Software Engineering 2024年09月20-22日 | 中国温州 第五届大数据、人工智能与软件工程国际研讨会&…...

编程日记 2024/2/7 0:44:28

Vue3父子组件传参

一&#xff0c;父子组件传参&#xff1a; 应用场景&#xff1a;父子组件传参 Vue3碎片&#xff1a;defineEmits&#xff0c;defineProps&#xff0c;ref&#xff0c;reactive&#xff0c;onMounted 1.父组件传子组件 a.父组件传参子组件 import { ref} from vue import OnChi…...

编程日记 2024/2/7 0:43:27

SpringBoot整理-微服务

Spring Boot 在构建微服务架构的应用中发挥着关键作用。微服务是一种将大型复杂应用拆分为更小、更容易管理和维护的服务的架构风格。每个服务通常围绕特定的业务功能构建，并且可以独立部署、扩展和更新。Spring Boot 提供了一系列特性和工具，使得创建和维护这些独立服务变得…...

编程日记 2024/2/7 0:38:22

服务器和CDN推荐

简介 陆云Roovps是一家成立于2021年的主机服务商&#xff0c;主要业务是销售美国服务器、香港服务器及国外湖北十堰高防服务器&#xff0c;还有相关CDN产品。&#xff08; 地址&#xff1a;roovps&#xff09; 一、相关产品...

编程日记 2024/2/7 0:37:20

c#读取csv文件中的某一列的数据

chat8 (chat779.com) 上面试GPT-3.5,很好的浏览网站&#xff0c;输入问题&#xff0c;可得到答案。 问题1&#xff1a;c#如何在csv中读取某一列数据 解答方案&#xff1a;在 C#中&#xff0c;你可以使用File.ReadAllLines来读取CSV中的所有行&#xff0c;然后逐行解析每一行…...

编程日记 2024/2/7 0:34:17

不懂快团团大团长对接？凭什么快团团的钱轮到你赚？

对接头部快团团大团长&#xff0c;让快团团大团长帮你卖货 分享几个推品的关键词&#xff1a; 1.推品的内容&#xff1a;产品实拍图核心卖点 不要上来就发笔记&#xff0c;你的产品图和文案还没吸引人&#xff0c;就发笔记没有人看。 可以先发你产品的简短卖点和图片&#xff…...

编程日记 2024/2/7 0:32:15

OpenGL 入门（九）—Material（材质）和 光照贴图

文章目录 材质设置材质光的属性脚本实现 光照贴图漫反射贴图高光反射贴图 材质 材质本质是一个数据集&#xff0c;主要功能就是给渲染器提供数据和光照算法。 如果我们想要在OpenGL中模拟多种类型的物体&#xff0c;我们必须针对每种表面定义不同的材质(Material)属性。 我们…...

编程日记 2024/2/7 0:31:14

jmeter-03界面介绍

文章目录 主界面介绍工具栏介绍测试计划介绍线程组介绍线程组——选择测试计划&#xff0c;右键-->添加-->线程-->线程组1.线程数2.准备时长(Ramp-up)3.循环次数4.same user on each iteratio5.调度器 主界面介绍 工具栏介绍 新建测试计划&#xff1a;创建一个空白的测…...

编程日记 2024/2/7 0:26:08

探究 MySQL 中使用 where 1=1 是否存在性能影响

文章目录 前言聊聊 mybatis 中多条件拼接的两种常规写法where 11使用 <where> 标签 性能影响where 11<where> 标签 总结个人简介 前言 最近在项目中使用 mybatis 写 SQL 使用了 where 11 来简化多条件拼接的写法&#xff0c;案例如下&#xff0c;借此聊聊多条件拼…...

编程日记 2024/2/7 0:25:07

对比学习演进笔记：从Memory Bank到MoCo的负样本队列设计

1. 对比学习的核心思想与演进背景 对比学习&#xff08;Contrastive Learning&#xff09;作为自监督学习的重要分支&#xff0c;其核心思想可以用一句话概括&#xff1a;让相似样本的特征表示尽可能接近&#xff0c;不相似样本的特征表示尽可能远离。这种思想最早可以追溯到20…...

编程新知 2026/3/31 10:20:37

从Dify到Coze再回来：一个后端开发用Gin+Swagger构建AI工作流的踩坑实录

从Dify到Coze再回来&#xff1a;一个后端开发用GinSwagger构建AI工作流的踩坑实录 作为一名长期使用Gin框架的后端开发者&#xff0c;当我第一次尝试将现有服务接入Dify平台构建AI工作流时&#xff0c;本以为会是一次顺畅的旅程。毕竟&#xff0c;我们的API已经通过Swagger 2.0…...

编程新知 2026/3/31 9:05:53

造相Z-Image文生图模型v2实战应用：电商主图、课件插图、设计提案一键生成

造相Z-Image文生图模型v2实战应用&#xff1a;电商主图、课件插图、设计提案一键生成 1. 为什么选择Z-Image v2进行商业图像创作 在当今内容爆炸的时代&#xff0c;视觉素材的需求量呈指数级增长。传统图像创作方式面临三大痛点&#xff1a;专业设计师成本高昂、版权素材获取…...

编程新知 2026/3/31 8:33:43

Stable Diffusion v1.5 Archive 镜像实测：5步完成部署，快速体验文生图

Stable Diffusion v1.5 Archive 镜像实测&#xff1a;5步完成部署&#xff0c;快速体验文生图 1. 开篇&#xff1a;为什么选择SD1.5 Archive版本 Stable Diffusion作为当前最热门的开源AI绘画模型&#xff0c;已经迭代了多个版本。其中v1.5作为经典版本&#xff0c;在图像质量…...

编程新知 2026/3/31 8:09:30

Phi-4-mini-reasoning部署实操手册：supervisor服务管理与日志排查指南

Phi-4-mini-reasoning部署实操手册&#xff1a;supervisor服务管理与日志排查指南 1. 模型概述 Phi-4-mini-reasoning 是一个专注于推理任务的文本生成模型&#xff0c;特别适合处理数学题、逻辑题、多步分析和简洁结论输出。与通用聊天模型不同&#xff0c;它采用"题目…...

编程新知 2026/3/31 7:47:24

STEP3-VL-10B实际作品集：MMBench 92.05分视觉识别能力高清图文输出示例

STEP3-VL-10B实际作品集&#xff1a;MMBench 92.05分视觉识别能力高清图文输出示例 1. 引言&#xff1a;当AI“看懂”了世界 你有没有想过&#xff0c;让AI像人一样“看懂”一张图片&#xff0c;到底有多难&#xff1f; 这不仅仅是识别出图片里有什么东西那么简单。比如给你…...

编程新知 2026/3/31 6:54:59

忍者像素绘卷微信小程序开发：生成图水印添加与版权保护机制实现

忍者像素绘卷微信小程序开发&#xff1a;生成图水印添加与版权保护机制实现 1. 项目背景与需求分析 忍者像素绘卷是一款基于Z-Image-Turbo深度优化的图像生成工作站&#xff0c;它融合了忍者文化与16-Bit复古游戏美学&#xff0c;为用户提供独特的创作体验。随着用户生成内容…...

编程新知 2026/3/31 5:34:20

【DeepSeek-R1背后的技术】系列七：冷启动——从“零”到“一”的智能启蒙

1. 冷启动&#xff1a;AI模型的"启蒙教育" 想象一下&#xff0c;你面前站着一个刚出生的婴儿&#xff0c;他对这个世界一无所知。如果你直接把他扔进大学课堂&#xff0c;会发生什么&#xff1f;他可能会哭闹、听不懂任何内容&#xff0c;甚至产生恐惧心理。这就是一…...

编程新知 2026/3/31 5:32:20

Ku频段相控阵天线避坑指南：从G/T骤降到EIRP波动，这些实测数据你要知道

Ku频段相控阵天线性能衰减实测&#xff1a;60离轴角下的G/T与EIRP工程修正策略 相控阵天线在卫星通信领域正经历从实验室到工程应用的跨越式发展。当无人机以60离轴角追踪卫星时&#xff0c;实测数据显示天线增益可能骤降4.5dB——这个数字足以让精心计算的链路预算彻底失效。在…...

编程新知 2026/3/31 5:30:18

STM32CubeMX实战指南：从零搭建HAL库项目与LED控制

1. STM32CubeMX与HAL库开发入门 第一次接触STM32开发的朋友可能会被各种专业术语吓到——寄存器、固件库、HAL库、时钟树配置... 作为一个从51单片机转战STM32的"过来人"&#xff0c;我完全理解这种困惑。三年前我刚开始用STM32F103时&#xff0c;光是搭建开发环境就…...

编程新知 2026/3/31 5:14:05