嵌入式UI开发-lvgl+wsl2+vscode系列:6、布局(Layouts)

一、前言

这节总结一下整体页面的布局方式,lvgl的布局方式比较少,目前只有flex和grid两大类布局,即弹性布局和网格布局,弹性布局一般就是指定相对位置,网格布局就是将整个页面划分为网格状,我们做其它的UI开发虽然可能有更多的方式,但是基本这两类的布局方式已经足够灵活,满足我们的页面布局要求。

二、布局示例

1、flex弹性布局示例1(纵向和横向布局)

#include "../../lv_examples.h"
#if LV_USE_FLEX && LV_BUILD_EXAMPLES/*** 使用 Flexbox 的简单行列布局*/
void lv_example_flex_1(void)
{/*创建具有 ROW flex 方向的容器*/lv_obj_t * cont_row = lv_obj_create(lv_screen_active());lv_obj_set_size(cont_row, 300, 75);lv_obj_align(cont_row, LV_ALIGN_TOP_MID, 0, 5);lv_obj_set_flex_flow(cont_row, LV_FLEX_FLOW_ROW);/*创建具有 COLUMN flex方向的容器*/lv_obj_t * cont_col = lv_obj_create(lv_screen_active());lv_obj_set_size(cont_col, 200, 150);lv_obj_align_to(cont_col, cont_row, LV_ALIGN_OUT_BOTTOM_MID, 0, 5);lv_obj_set_flex_flow(cont_col, LV_FLEX_FLOW_COLUMN);uint32_t i;for(i = 0; i < 10; i++) {lv_obj_t * obj;lv_obj_t * label;/*Add items to the row*/obj = lv_button_create(cont_row);lv_obj_set_size(obj, 100, LV_PCT(100));label = lv_label_create(obj);lv_label_set_text_fmt(label, "Item: %"LV_PRIu32"", i);lv_obj_center(label);/*Add items to the column*/obj = lv_button_create(cont_col);lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);label = lv_label_create(obj);lv_label_set_text_fmt(label, "Item: %"LV_PRIu32, i);lv_obj_center(label);}
}#endif

image.png
展示:带有横向弹性布局容器以及纵向弹性布局的容器,然后向其中添加label等内容即可。

2、flex弹性布局示例2(wrap布局自动化换行)

#include "../../lv_examples.h"
#if LV_USE_FLEX && LV_BUILD_EXAMPLES/*** 用包裹将物品排成行,并放置物品以使其周围有均匀的空间。*/
void lv_example_flex_2(void)
{static lv_style_t style;lv_style_init(&style);lv_style_set_flex_flow(&style, LV_FLEX_FLOW_ROW_WRAP);lv_style_set_flex_main_place(&style, LV_FLEX_ALIGN_SPACE_EVENLY);lv_style_set_layout(&style, LV_LAYOUT_FLEX);lv_obj_t * cont = lv_obj_create(lv_screen_active());lv_obj_set_size(cont, 300, 220);lv_obj_center(cont);lv_obj_add_style(cont, &style, 0);uint32_t i;for(i = 0; i < 8; i++) {lv_obj_t * obj = lv_obj_create(cont);lv_obj_set_size(obj, 70, LV_SIZE_CONTENT);lv_obj_add_flag(obj, LV_OBJ_FLAG_CHECKABLE);lv_obj_t * label = lv_label_create(obj);lv_label_set_text_fmt(label, "%"LV_PRIu32, i);lv_obj_center(label);}
}#endif

image.png
展示:用wrap将items排成行,并放置物品以使其周围有均匀的空间。

3、flex弹性布局示例3(弹性增长)

#include "../../lv_examples.h"
#if LV_USE_FLEX && LV_BUILD_EXAMPLES/*** 展示弹性增长。*/
void lv_example_flex_3(void)
{lv_obj_t * cont = lv_obj_create(lv_screen_active());lv_obj_set_size(cont, 300, 220);lv_obj_center(cont);lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW);lv_obj_t * obj;obj = lv_obj_create(cont);lv_obj_set_size(obj, 40, 40);           /*固定尺寸*/obj = lv_obj_create(cont);lv_obj_set_height(obj, 40);lv_obj_set_flex_grow(obj, 1);           /*可用空间的 1 部分*/obj = lv_obj_create(cont);lv_obj_set_height(obj, 40);lv_obj_set_flex_grow(obj, 2);           /*自由空间的 2 部分*/obj = lv_obj_create(cont);lv_obj_set_size(obj, 40, 40);           /*固定尺寸。它被“生长”项目冲到右侧*/
}#endif

image.png
展示:弹性增长

4、flex弹性布局示例4(反转弹性项目的顺序)

#include "../../lv_examples.h"
#if LV_USE_FLEX && LV_BUILD_EXAMPLES/*** 反转弹性项目的顺序*/
void lv_example_flex_4(void)
{lv_obj_t * cont = lv_obj_create(lv_screen_active());lv_obj_set_size(cont, 300, 220);lv_obj_center(cont);lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN_REVERSE);uint32_t i;for(i = 0; i < 6; i++) {lv_obj_t * obj = lv_obj_create(cont);lv_obj_set_size(obj, 100, 50);lv_obj_t * label = lv_label_create(obj);lv_label_set_text_fmt(label, "Item: %"LV_PRIu32, i);lv_obj_center(label);}
}#endif

image.png
展示:反转弹性项目的顺序

5、flex弹性布局示例5(布局行和列添加样式属性)

#include "../../lv_examples.h"
#if LV_USE_FLEX && LV_BUILD_EXAMPLESstatic void row_gap_anim(void * obj, int32_t v)
{lv_obj_set_style_pad_row(obj, v, 0);
}static void column_gap_anim(void * obj, int32_t v)
{lv_obj_set_style_pad_column(obj, v, 0);
}/*** 演示列和行间隙样式属性的效果*/
void lv_example_flex_5(void)
{lv_obj_t * cont = lv_obj_create(lv_screen_active());lv_obj_set_size(cont, 300, 220);lv_obj_center(cont);lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);uint32_t i;for(i = 0; i < 9; i++) {lv_obj_t * obj = lv_obj_create(cont);lv_obj_set_size(obj, 70, LV_SIZE_CONTENT);lv_obj_t * label = lv_label_create(obj);lv_label_set_text_fmt(label, "%"LV_PRIu32, i);lv_obj_center(label);}lv_anim_t a;lv_anim_init(&a);lv_anim_set_var(&a, cont);lv_anim_set_values(&a, 0, 10);lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);lv_anim_set_exec_cb(&a, row_gap_anim);lv_anim_set_duration(&a, 500);lv_anim_set_playback_duration(&a, 500);lv_anim_start(&a);lv_anim_set_exec_cb(&a, column_gap_anim);lv_anim_set_duration(&a, 3000);lv_anim_set_playback_duration(&a, 3000);lv_anim_start(&a);
}#endif

flex.gif
展示:列和行间隙样式属性的效果。

6、flex弹性布局示例6(RTL从右到左布局)

#include "../../lv_examples.h"
#if LV_USE_FLEX && LV_BUILD_EXAMPLES/*** RTL 基本方向更改项目的顺序。* 还演示水平滚动如何与 RTL 配合使用。*/
void lv_example_flex_6(void)
{lv_obj_t * cont = lv_obj_create(lv_screen_active());lv_obj_set_style_base_dir(cont, LV_BASE_DIR_RTL, 0);lv_obj_set_size(cont, 300, 220);lv_obj_center(cont);lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);uint32_t i;for(i = 0; i < 20; i++) {lv_obj_t * obj = lv_obj_create(cont);lv_obj_set_size(obj, 70, LV_SIZE_CONTENT);lv_obj_t * label = lv_label_create(obj);lv_label_set_text_fmt(label, "%"LV_PRIu32, i);lv_obj_center(label);}
}
#endif

flex2.gif
展示:RTL从右到左的布局方式,以及水平滚动和RTL配合。

7、grid网格布局示例1(基本的网格布局)

#include "../../lv_examples.h"
#if LV_USE_GRID && LV_BUILD_EXAMPLES/*** 一个简单的网格*/
void lv_example_grid_1(void)
{static int32_t col_dsc[] = {70, 70, 70, LV_GRID_TEMPLATE_LAST};static int32_t row_dsc[] = {50, 50, 50, LV_GRID_TEMPLATE_LAST};/*创建一个带有网格的容器*/lv_obj_t * cont = lv_obj_create(lv_screen_active());lv_obj_set_style_grid_column_dsc_array(cont, col_dsc, 0);lv_obj_set_style_grid_row_dsc_array(cont, row_dsc, 0);lv_obj_set_size(cont, 300, 220);lv_obj_center(cont);lv_obj_set_layout(cont, LV_LAYOUT_GRID);lv_obj_t * label;lv_obj_t * obj;uint32_t i;for(i = 0; i < 9; i++) {uint8_t col = i % 3;uint8_t row = i / 3;obj = lv_button_create(cont);/*水平和垂直拉伸单元格 将跨度设置为 1 以使单元格为 1 列/行大小*/lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,LV_GRID_ALIGN_STRETCH, row, 1);label = lv_label_create(obj);lv_label_set_text_fmt(label, "c%d, r%d", col, row);lv_obj_center(label);}
}#endif

image.png
展示:基本的网格布局。

8、grid网格布局示例2(单元布局和span跨度)

#include "../../lv_examples.h"
#if LV_USE_GRID && LV_BUILD_EXAMPLES/*** 展示单元布局和跨度*/
void lv_example_grid_2(void)
{static int32_t col_dsc[] = {70, 70, 70, LV_GRID_TEMPLATE_LAST};static int32_t row_dsc[] = {50, 50, 50, LV_GRID_TEMPLATE_LAST};/*创建一个带有网格的容器*/lv_obj_t * cont = lv_obj_create(lv_screen_active());lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);lv_obj_set_size(cont, 300, 220);lv_obj_center(cont);lv_obj_t * label;lv_obj_t * obj;/*单元格设置为 0;0 并水平和垂直对齐到开头(左/上)*/obj = lv_obj_create(cont);lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_START, 0, 1,LV_GRID_ALIGN_START, 0, 1);label = lv_label_create(obj);lv_label_set_text(label, "c0, r0");/*单元格设置为 1;0 并水平对齐到起始位置(左侧)并垂直居中*/obj = lv_obj_create(cont);lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_START, 1, 1,LV_GRID_ALIGN_CENTER, 0, 1);label = lv_label_create(obj);lv_label_set_text(label, "c1, r0");/*C将单元格设置为 2;0 并水平对齐到起点(左侧),垂直对齐到终点(底部)*/obj = lv_obj_create(cont);lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_START, 2, 1,LV_GRID_ALIGN_END, 0, 1);label = lv_label_create(obj);lv_label_set_text(label, "c2, r0");/*单元格为 1;1 但 2 列宽(跨度 = 2)。将宽度和高度设置为拉伸。*/obj = lv_obj_create(cont);lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 1, 2,LV_GRID_ALIGN_STRETCH, 1, 1);label = lv_label_create(obj);lv_label_set_text(label, "c1-2, r1");/*单元格为 0;1,但有 2 行高(跨度 = 2)。将宽度和高度设置为拉伸。*/obj = lv_obj_create(cont);lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 0, 1,LV_GRID_ALIGN_STRETCH, 1, 2);label = lv_label_create(obj);lv_label_set_text(label, "c0\nr1-2");
}#endif

image.png
展示:单元布局和span跨度。

9、grid网格布局示例3(网格自由单元)

    #include "../../lv_examples.h"
#if LV_USE_GRID && LV_BUILD_EXAMPLES/*** 展示网格的“自由单元”*/
void lv_example_grid_3(void)
{/*Column 1: fix width 60 px*Column 2: 1 unit from the remaining free space*Column 3: 2 unit from the remaining free space*/static int32_t col_dsc[] = {60, LV_GRID_FR(1), LV_GRID_FR(2), LV_GRID_TEMPLATE_LAST};/*Row 1: fix width 50 px*Row 2: 1 unit from the remaining free space*Row 3: fix width 50 px*/static int32_t row_dsc[] = {50, LV_GRID_FR(1), 50, LV_GRID_TEMPLATE_LAST};/*创建一个带有网格的容器*/lv_obj_t * cont = lv_obj_create(lv_screen_active());lv_obj_set_size(cont, 300, 220);lv_obj_center(cont);lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);lv_obj_t * label;lv_obj_t * obj;uint32_t i;for(i = 0; i < 9; i++) {uint8_t col = i % 3;uint8_t row = i / 3;obj = lv_obj_create(cont);/*水平和垂直拉伸单元格 将跨度设置为 1 以使单元格为 1 列/行大小*/lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,LV_GRID_ALIGN_STRETCH, row, 1);label = lv_label_create(obj);lv_label_set_text_fmt(label, "%d,%d", col, row);lv_obj_center(label);}
}#endif

image.png
展示:网格的自由单元。

10、grid网格布局示例4(轨道放置)

#include "../../lv_examples.h"
#if LV_USE_GRID && LV_BUILD_EXAMPLES/*** 演示轨道放置*/
void lv_example_grid_4(void)
{static int32_t col_dsc[] = {60, 60, 60, LV_GRID_TEMPLATE_LAST};static int32_t row_dsc[] = {45, 45, 45, LV_GRID_TEMPLATE_LAST};/*在列之间添加空间并将行移至底部(末尾)*//*创建一个带有网格的容器*/lv_obj_t * cont = lv_obj_create(lv_screen_active());lv_obj_set_grid_align(cont, LV_GRID_ALIGN_SPACE_BETWEEN, LV_GRID_ALIGN_END);lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);lv_obj_set_size(cont, 300, 220);lv_obj_center(cont);lv_obj_t * label;lv_obj_t * obj;uint32_t i;for(i = 0; i < 9; i++) {uint8_t col = i % 3;uint8_t row = i / 3;obj = lv_obj_create(cont);/*水平和垂直拉伸单元格 将跨度设置为 1 以使单元格为 1 列/行大小*/lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,LV_GRID_ALIGN_STRETCH, row, 1);label = lv_label_create(obj);lv_label_set_text_fmt(label, "%d,%d", col, row);lv_obj_center(label);}
}#endif

image.png
展示:轨道放置。

11、grid网格布局示例5(列和行间隙)

#include "../../lv_examples.h"
#if LV_USE_GRID && LV_BUILD_EXAMPLESstatic void row_gap_anim(void * obj, int32_t v)
{lv_obj_set_style_pad_row(obj, v, 0);
}static void column_gap_anim(void * obj, int32_t v)
{lv_obj_set_style_pad_column(obj, v, 0);
}/*** 展示列和行间隙*/
void lv_example_grid_5(void)
{/*60x60 cells*/static int32_t col_dsc[] = {60, 60, 60, LV_GRID_TEMPLATE_LAST};static int32_t row_dsc[] = {45, 45, 45, LV_GRID_TEMPLATE_LAST};/*创建一个带有网格的容器*/lv_obj_t * cont = lv_obj_create(lv_screen_active());lv_obj_set_size(cont, 300, 220);lv_obj_center(cont);lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);lv_obj_t * label;lv_obj_t * obj;uint32_t i;for(i = 0; i < 9; i++) {uint8_t col = i % 3;uint8_t row = i / 3;obj = lv_obj_create(cont);lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,LV_GRID_ALIGN_STRETCH, row, 1);label = lv_label_create(obj);lv_label_set_text_fmt(label, "%d,%d", col, row);lv_obj_center(label);}lv_anim_t a;lv_anim_init(&a);lv_anim_set_var(&a, cont);lv_anim_set_values(&a, 0, 10);lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);lv_anim_set_exec_cb(&a, row_gap_anim);lv_anim_set_duration(&a, 500);lv_anim_set_playback_duration(&a, 500);lv_anim_start(&a);lv_anim_set_exec_cb(&a, column_gap_anim);lv_anim_set_duration(&a, 3000);lv_anim_set_playback_duration(&a, 3000);lv_anim_start(&a);
}#endif

grid5.gif
展示:列和行间隙。

12、grid网格布局示例6(RTL方向)

#include "../../lv_examples.h"
#if LV_USE_GRID && LV_BUILD_EXAMPLES/*** 在网格上演示 RTL 方向*/
void lv_example_grid_6(void)
{static int32_t col_dsc[] = {60, 60, 60, LV_GRID_TEMPLATE_LAST};static int32_t row_dsc[] = {45, 45, 45, LV_GRID_TEMPLATE_LAST};/*创建一个带有网格的容器*/lv_obj_t * cont = lv_obj_create(lv_screen_active());lv_obj_set_size(cont, 300, 220);lv_obj_center(cont);lv_obj_set_style_base_dir(cont, LV_BASE_DIR_RTL, 0);lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);lv_obj_t * label;lv_obj_t * obj;uint32_t i;for(i = 0; i < 9; i++) {uint8_t col = i % 3;uint8_t row = i / 3;obj = lv_obj_create(cont);/*水平和垂直拉伸单元格 将跨度设置为 1 以使单元格为 1 列/行大小*/lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,LV_GRID_ALIGN_STRETCH, row, 1);label = lv_label_create(obj);lv_label_set_text_fmt(label, "%d,%d", col, row);lv_obj_center(label);}
}#endif

image.png
展示:RTL方向。

三、最后

基本上布局就这些了,我们设计的页面也都根据网格或者弹性布局做组合和划分。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/866911.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2-3 图像分类数据集

MNIST数据集是图像分类任务中广泛使用的数据集之一&#xff0c;但作为基准数据集过于简单&#xff0c;我们将使用类似但更复杂的Fashion-MNIST数据集。 %matplotlib inline import torch import torchvision # pytorch模型关于计算机视觉模型实现的一个库 from torch.utils i…

面试题 4:阐述以下方法 @classmethod, @staticmethod, @property?

欢迎莅临我的博客 &#x1f49d;&#x1f49d;&#x1f49d;&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

绘唐科技聚星文社是同款一键生成工具

聚星文社是同款一键生成工具 工具下载 绘唐科技成立于2015年&#xff0c;是一家专注于虚拟现实&#xff08;VR&#xff09;技术和产品开发的高科技企业。绘唐科技的目标是利用虚拟现实技术为人们带来更加沉浸式的体验&#xff0c;推动虚拟现实在各个领域的应用和发展。 绘唐科…

LabVIEW环境下OCR文字识别的实现策略与挑战解析

引言 在自动化测试领域&#xff0c;OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;技术扮演着重要角色&#xff0c;它能够将图像中的文字转换成机器可编辑的格式。对于使用LabVIEW约5个月&#xff0c;主要进行仪器控制与数据采集的你而言…

谈大语言模型动态思维流程编排

尽管大语言模型已经呈现出了强大的威力&#xff0c;但是如何让它完美地完成一个大的问题&#xff0c;仍然是一个巨大的挑战。 需要精心地给予大模型许多的提示&#xff08;Prompt&#xff09;。对于一个复杂的应用场景&#xff0c;编写一套完整的&#xff0c;准确无误的提示&am…

jmeter-beanshell学习1-vars使用获取变量和设置变量

最近又开始了用jmeter做自动化&#xff0c;不管怎么实现&#xff0c;都逃离不了用beanshell&#xff0c;最后把所有校验都放在了beanshell判断&#xff0c;效果还不错。 首先jmeter有很多beanshell相关的元件&#xff0c;取样器、前置处理器、后置处理器、断言&#xff0c;暂时…

南方航空阿里v2滑块验证码逆向分析思路学习

目录 一、声明&#xff01; 二、介绍 三、请求流程分析&#xff1a; 1.拿验证码 2.提交第一次设备信息 3.提交第二次设备信息 4.提交验证 ​编辑 四、接口响应数据分析&#xff1a; 1.拿验证码 2.提交第一次设备信息 3.提交第二次设备信息 4.提…

代码随想录第43天|动态规划

121. 买卖股票的最佳时机 股票只能被买卖一次 dp[i][0] 持有股票所得到的最大现金, dp[i][1] 不持有股票所得的最大现金, 避免定义多个变量递推公式: dp[i][0] 可能是在之前买入, 也可能是在这次被买入 max(dp[i - 1][0],-prices[i])dp[i][1] 可能是在本次抛售, 也可能在之…

误删分区后的数据拯救:双管齐下恢复策略

在数字化时代&#xff0c;数据的价值日益凸显&#xff0c;而误删分区作为常见的数据安全威胁之一&#xff0c;常常让用户措手不及。本文将深入探讨误删分区的现象&#xff0c;并为您揭示两种高效的数据恢复方案&#xff0c;旨在帮助您在最短时间内找回失去的数据&#xff0c;同…

RH850系列芯片深度剖析 1.8-内存管理之MPU

RH850系列芯片深度剖析 1.8-内存管理之MPU 文章目录 RH850系列芯片深度剖析 1.8-内存管理之MPU一、MPU简介1.1 功能特性1.2 系统保护标识符(SPID)二、保护区域设置2.1 保护区域属性设置2.2 保护区域设置注意事项2.2.1 跨越保护区域边界2.2.2 无效的保护区域设置2.2.3 保护违规…

当火热的Mamba遇到火热的YOLO,会发生怎么样的反应吗?

作者&#xff1a;浙江师范大学 论文地址&#xff1a;https://arxiv.org/pdf/2406.05835 代码地址&#xff1a;https://github.com/HZAI-ZJNU/Mamba-YOLO 目录 前言一、摘要二、介绍二、相关工作2.1 实时目标检测器2.2 端到端的目标检测器2.3 视觉状态空间模型 三 方法3.1 基础知…

Amesim应用篇-信号传递

前言 在Amesim中常见的信号传递是通过信号线连接&#xff0c;针对简单的模型通过信号线连接还可以是信号线清晰规整&#xff0c;方便查看。如果模型较复杂&#xff0c;传递信号的元件较多时&#xff0c;此时再继续使用信号线进行信号传递&#xff0c;可能会使草图界面看起来杂…

Leetcode - 周赛403

目录 一&#xff0c;3200. 三角形的最大高度 二&#xff0c;3195. 包含所有 1 的最小矩形面积 I 三&#xff0c;3196. 最大化子数组的总成本 四&#xff0c;3197. 包含所有 1 的最小矩形面积 II 一&#xff0c;3200. 三角形的最大高度 本题是一道模拟题&#xff0c;可以先排…

【Leetcode笔记】406.根据身高重建队列

文章目录 1. 题目要求2.解题思路 注意3.ACM模式代码 1. 题目要求 2.解题思路 首先&#xff0c;按照每个人的身高属性&#xff08;即people[i][0]&#xff09;来排队&#xff0c;顺序是从大到小降序排列&#xff0c;如果遇到同身高的&#xff0c;按照另一个属性&#xff08;即p…

分享超级实用的3款AI工具,让工作效率轻松翻倍

Hey&#xff0c;职场小伙伴们&#xff01;每天被堆积如山的工作压得喘不过气&#xff1f;加班成了日常&#xff0c;效率却不见提高&#xff1f;别急&#xff0c;今天就让我来给你们揭秘3款AI神器&#xff0c;它们将是你职场上的得力助手&#xff0c;让你的工作效率轻松翻倍&…

AR视频技术与EasyDSS流媒体视频管理平台:打造沉浸式视频体验

随着增强现实&#xff08;AR&#xff09;技术的飞速发展&#xff0c;其在各个领域的应用日益广泛。这项技术通过实时计算摄影机影像的位置及角度&#xff0c;将虚拟信息叠加到真实世界中&#xff0c;为用户带来超越现实的感官体验。AR视频技术不仅极大地丰富了我们的视觉体验&a…

阶段总结——基于深度学习的三叶青图像识别

阶段总结——基于深度学习的三叶青图像识别 文章目录 一、计算机视觉图像分类系统设计二、训练模型2.1. 构建数据集2.2. 网络模型选择2.3. 图像数据增强与调参2.4. 部署模型到web端2.5. 开发图像识别小程序 三、实验结果3.1. 模型训练3.2. 模型部署 四、讨论五、参考文献&#…

Linux wget报未找到命令

wget报未找到命令需要安装wget 1、下载wget安装文件&#xff0c;本次于华为云资源镜像下载 地址&#xff1a;https://mirrors.huaweicloud.com/centos-vault/7.8.2003/os/x86_64/Packages/ 2、下载后上传到安装服务器/install_package&#xff0c;执行命令安装 rpm -ivh /i…

联合概率密度函数

目录 1. 什么是概率密度由联合概率密度求概率参考链接 1. 什么是概率密度 概率密度到底在表达什么&#xff1f; 外卖在20-40分钟内送达的概率 随机变量落在[20,40]之间的概率。下图中&#xff0c;对总面积做规范化处理&#xff0c;令总面积1&#xff0c; f ( x ) f(x) f(x)则成…

用requirements.txt配置环境

1. 在anaconda创建环境 创建Python版本为3.8的环境&#xff0c;与yolov5所需的包适配。 2. 在Anaconda Prompt中激活环境 (base) C:\Users\吴伊晴>conda activate yolov5 3. 配置环境 用指定路径中的requirements.txt配置环境。 (yolov5) C:\Users\吴伊晴>pip insta…