登录发现更多内容
首页
分类
发帖
账号
自动登录
找回密码
密码
登录
立即注册
立即登录
立即注册
其他登录
QQ
微信
首页
Portal
求助问答
Xiuno资源
Xiuno教程
Xiuno插件
Xiuno主题
休闲茶馆
定制主题
产品教程
BBS
求助问答
Xiuno资源
Xiuno教程
Xiuno插件
Xiuno主题
休闲茶馆
定制主题
开发资料
求助问答
Xiuno资源
Xiuno教程
Xiuno插件
Xiuno主题
休闲茶馆
定制主题
样品购买
求助问答
Xiuno资源
Xiuno教程
Xiuno插件
Xiuno主题
休闲茶馆
定制主题
IoT云平台
求助问答
Xiuno资源
Xiuno教程
Xiuno插件
Xiuno主题
休闲茶馆
定制主题
GitHub
求助问答
Xiuno资源
Xiuno教程
Xiuno插件
Xiuno主题
休闲茶馆
定制主题
技术博客
求助问答
Xiuno资源
Xiuno教程
Xiuno插件
Xiuno主题
休闲茶馆
定制主题
搜索
搜索
热搜:
LoRa
ESP8266
安信可
本版
帖子
用户
请
登录
后使用快捷导航
没有账号?
立即注册
每日签到
任务
广播
导读
排行榜
设置
我的收藏
退出
9
0
0
首页
LVGL教程玩法
›
小安派lvgl学习(二)
返回列表
小安派lvgl学习(二)
[ 复制链接 ]
发布帖子
zzes
金牌会员
5
主题
46
回帖
1597
积分
金牌会员
金牌会员, 积分 1597, 距离下一级还需 1403 积分
金牌会员, 积分 1597, 距离下一级还需 1403 积分
积分
1597
私信
9人留言
楼主
LVGL教程玩法
2483
9
2024-1-28 22:30:00
# lvgl flex布局学习 ## 代码示例  ``` // 纵向flex布局 lv_obj_t * the_col = lv_obj_create(lv_scr_act()); lv_obj_clear_flag(the_col, LV_OBJ_FLAG_SCROLLABLE); lv_obj_set_size(the_col, 240, 80); lv_obj_set_flex_flow(the_col, LV_FLEX_FLOW_COLUMN); lv_obj_set_flex_align(the_col, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER); lv_obj_align(the_col, LV_ALIGN_TOP_MID, 0, 0); // 标题 lv_obj_t * main_title = lv_label_create(the_col); lv_label_set_text (main_title, "main_title"); lv_obj_add_style(main_title, &style_title, 0); lv_obj_add_style(main_title, &style_text_opacity, 0); lv_obj_t * sub_title = lv_label_create(the_col); lv_label_set_text (sub_title, "sub_title"); lv_obj_add_style(sub_title, &style_title, 0); lv_obj_add_style(sub_title, &style_text_opacity, 0); // 横向flex布局 lv_obj_t * the_row = lv_obj_create(lv_scr_act()); lv_obj_clear_flag(the_row, LV_OBJ_FLAG_SCROLLABLE); // 取消滚动条 lv_obj_set_size(the_row, 240, 60); lv_obj_set_flex_flow(the_row, LV_FLEX_FLOW_ROW); lv_obj_set_flex_align(the_col, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER); lv_obj_align_to(the_row, the_col, LV_ALIGN_OUT_BOTTOM_MID, 0, 0); // 创建按钮1 lv_obj_t * btn1 = lv_btn_create(the_row); // 创建按钮2 lv_obj_t * btn2 = lv_btn_create(the_row); // 给按钮添加文字 lv_obj_t * label1 = lv_label_create(btn1); lv_label_set_text(label1, "FLEXBTN1"); lv_obj_t * label2 = lv_label_create(btn2); lv_label_set_text(label2, "FLEXBTN2"); ``` 示例中, 两个文字是纵向flex布局, 两个按钮是横向flex布局 使用 `lv_obj_set_flex_flow` 方法设置当前的对象为flex布局, 方法第一个参数是当前对象, 第二个参数是排列方向, 一般也就用LV_FLEX_FLOW_ROW 和 `LV_FLEX_FLOW_COLUMN` ```c LV_FLEX_FLOW_ROW 将子元素排成一排而不包裹 LV_FLEX_FLOW_COLUMN 将子项放在一列中而不换行 LV_FLEX_FLOW_ROW_WRAP 将孩子排成一排并包裹起来 LV_FLEX_FLOW_COLUMN_WRAP 将子元素放置在带有环绕的列中 LV_FLEX_FLOW_ROW_REVERSE 将子元素排成一行而不换行,但顺序相反 LV_FLEX_FLOW_COLUMN_REVERSE 将子项放在一列中,不换行,但顺序相反 LV_FLEX_FLOW_ROW_WRAP_REVERSE 将子元素排成一行而不换行,但顺序相反 LV_FLEX_FLOW_COLUMN_WRAP_REVERSE 将子项放在一列中,不换行,但顺序相反 ``` 设置完方向, 可以设置元素如何排列, 使用 `lv_obj_set_flex_align` , 第一个参数是当前对象, 第二个参数是横向的对齐方式, 第三个参数是纵向的对齐方式, 这玩意跟CSS的挺像的 ``` LV_FLEX_ALIGN_START:水平方向左,垂直方向上 LV_FLEX_ALIGN_CENTER:居中 LV_FLEX_ALIGN_END:水平方向右,垂直方向下 LV_FLEX_ALIGN_STRETCH: LV_FLEX_ALIGN_SPACE_EVENLY:使两项目间距相等 LV_FLEX_ALIGN_SPACE_AROUND:在一行/列上均匀分布,视觉空间不相等 LV_FLEX_ALIGN_SPACE_BETWEEN:在一行/列上均匀分布 ``` 除了这些 还用到了对象的对齐方法 `lv_obj_align` 和 `lv_obj_align_to` `lv_obj_align` 设置了纵向flex布局的为顶部中间对齐 `lv_obj_align_to` 设置了横向flex布局相对于上面的横向布局 LV_ALIGN_OUT_BOTTOM_MID 对齐 这样就紧挨着他下面啦 ) 然后 `lv_label_create` 和 `lv_btn_create` 的参数填对应的布局对象中即可
点赞
0
收藏
0
淘帖
0
────
0
人觉得很赞
────
回复
使用道具
举报
9 回复
电梯直达
正序浏览
倒序浏览
正序浏览
沙发
WT_0213
回复
使用道具
举报
2024-1-28 23:43:05
回复
评论
使用道具
举报
板凳
wukong50
回复
使用道具
举报
2024-1-29 07:45:21
你好 有完整代码吗
回复
评论
使用道具
举报
地板
noonezero
回复
使用道具
举报
2024-1-29 08:05:06
赞一个
回复
评论
使用道具
举报
5
#
1084504793
回复
使用道具
举报
2024-1-29 08:16:52
赞
回复
评论
使用道具
举报
6
#
爱笑
回复
使用道具
举报
2024-1-29 08:37:58
不错不错
回复
评论
使用道具
举报
用心做好保姆工作
7
#
干簧管
回复
使用道具
举报
2024-1-29 08:43:38
👍🏻
回复
评论
使用道具
举报
8
#
bzhou830
回复
使用道具
举报
2024-1-29 09:06:50
回复
评论
使用道具
举报
选择去发光,而不是被照亮
9
#
lazy
回复
使用道具
举报
2024-1-29 09:53:42
学习学习
回复
评论
使用道具
举报
10
#
timo
回复
使用道具
举报
2024-1-29 22:53:24
赞
回复
评论
使用道具
举报
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
立即登录
手机登录
点评
高级模式
本版积分规则
回帖并转播
回帖后跳转到最后一页
返回
今日推荐
BW20-12F-KIT usbd_inic_dplus问题
基于Ai-WB2的HomeAssistant实现RGB彩灯控制功能
BU04 原理图
基于 Ai-WV01-32S+STM32移植 emMCP 实现 AI 语音控制点灯
AiPi-PalChatV1_“湾湾小何”提示音测试固件V2.9_UART-MCP
[WB2] 实现自动发现局域网下的设备
热帖排行
小安弄点星闪开发板,扩大影响力
星闪连接个数
小安派-Eyes-S1 - GPIO中断编程
BW20-12F-KIT usbd_inic_dplus问题
智能环境监测系统可行性猜想
论坛应该出一个发帖时间排序
基于Ai-WB2的HomeAssistant实现RGB彩灯控制功能
BU04 原理图
统计信息
会员数: 30585 个
话题数: 44715 篇
首页
分类
我的