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

在VSCode+Guider基础上 运行Button圆角demo

news 2025/11/1 14:51:25

一、修改代码

setup_src_screen.c文件

/*
* Copyright 2025 NXP
* NXP Confidential and Proprietary. This software is owned or controlled by NXP and may only be used strictly in
* accordance with the applicable license terms. By expressly accepting such terms or by downloading, installing,
* activating and/or otherwise using the software, you are agreeing that you have read, and that you agree to
* comply with and are bound by, such license terms.  If you do not agree to be bound by the applicable license
* terms, then you may not retain, install, activate or otherwise use the software.
*/#include "lvgl/lvgl.h"
#include <stdio.h>
#include "gui_guider.h"
#include "events_init.h"
#include "widgets_init.h"
#include "../custom/custom.h"//创建和设置屏幕及其控件
void setup_scr_screen(lv_ui *ui)
{//Write codes screenui->screen = lv_obj_create(NULL);lv_obj_set_size(ui->screen, 480, 272);    // 设置屏幕尺寸lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);// 禁用滚动条//Write style for screen, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.// lv_obj_set_style_bg_opa(ui->screen, 0, LV_PART_MAIN|LV_STATE_DEFAULT);//屏幕样式设置 设置背景透明度为 0（完全透明）//Write codes screen_btnm_1 按钮矩阵创建// ui->screen_btnm_1 = lv_btnmatrix_create(ui->screen); //创建按钮矩阵对象// static const char *screen_btnm_1_text_map[] = {"1", "2", "3", "\n", "4", "5", "6", "\n", "7", "8", "9", "",};// lv_btnmatrix_set_map(ui->screen_btnm_1, screen_btnm_1_text_map); //将定义好的文本映射表应用到按钮矩阵 LVGL 会根据这个映射自动创建对应数量和布局的按钮// lv_obj_set_pos(ui->screen_btnm_1, 140, 82);// 位置 (x, y) 距离屏幕左边缘 140px，上边缘 82px// lv_obj_set_size(ui->screen_btnm_1, 200, 150);// 尺寸 (宽度, 高度) 整个按钮矩阵区域宽 200px，高 150px// //每个按钮会根据矩阵的总尺寸自动调整大小来平均分配空间。// //Write style for screen_btnm_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.// lv_obj_set_style_border_width(ui->screen_btnm_1, 1, LV_PART_MAIN|LV_STATE_DEFAULT); //边框宽度: 1像素// lv_obj_set_style_border_opa(ui->screen_btnm_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT); //边框透明度: 255（完全不透明）// lv_obj_set_style_border_color(ui->screen_btnm_1, lv_color_hex(0xc9c9c9), LV_PART_MAIN|LV_STATE_DEFAULT); //边框颜色: 浅灰色 #c9c9c9// lv_obj_set_style_border_side(ui->screen_btnm_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT); //边框位置: 所有边（上、下、左、右）// //内边距设置 上下内边距: 各16像素  左右内边距: 各16像素// lv_obj_set_style_pad_top(ui->screen_btnm_1, 16, LV_PART_MAIN|LV_STATE_DEFAULT);  // lv_obj_set_style_pad_bottom(ui->screen_btnm_1, 16, LV_PART_MAIN|LV_STATE_DEFAULT);// lv_obj_set_style_pad_left(ui->screen_btnm_1, 16, LV_PART_MAIN|LV_STATE_DEFAULT);// lv_obj_set_style_pad_right(ui->screen_btnm_1, 16, LV_PART_MAIN|LV_STATE_DEFAULT);// //按钮间距设置 行间距: 8像素（按钮之间的垂直间距） 列间距: 8像素（按钮之间的水平间距）// lv_obj_set_style_pad_row(ui->screen_btnm_1, 8, LV_PART_MAIN|LV_STATE_DEFAULT);// lv_obj_set_style_pad_column(ui->screen_btnm_1, 8, LV_PART_MAIN|LV_STATE_DEFAULT);// //背景和圆角设置 圆角半径: 4像素  背景透明度: 255（完全不透明）  背景颜色: 白色 #ffffff  渐变方向: 无渐变（纯色背景）// lv_obj_set_style_radius(ui->screen_btnm_1, 4, LV_PART_MAIN|LV_STATE_DEFAULT);// lv_obj_set_style_bg_opa(ui->screen_btnm_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);// lv_obj_set_style_bg_color(ui->screen_btnm_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);// lv_obj_set_style_bg_grad_dir(ui->screen_btnm_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);// //Write style for screen_btnm_1, Part: LV_PART_ITEMS, State: LV_STATE_DEFAULT.// //边框设置（单个按钮）// //边框宽度: 1像素  边框透明度: 完全不透明  边框颜色: 浅灰色 #c9c9c9  边框位置: 所有边// lv_obj_set_style_border_width(ui->screen_btnm_1, 1, LV_PART_ITEMS|LV_STATE_DEFAULT);// lv_obj_set_style_border_opa(ui->screen_btnm_1, 255, LV_PART_ITEMS|LV_STATE_DEFAULT);// lv_obj_set_style_border_color(ui->screen_btnm_1, lv_color_hex(0xc9c9c9), LV_PART_ITEMS|LV_STATE_DEFAULT);// lv_obj_set_style_border_side(ui->screen_btnm_1, LV_BORDER_SIDE_FULL, LV_PART_ITEMS|LV_STATE_DEFAULT);// //文字样式设置  文字颜色: 白色 #ffffff   字体: Montserrat Medium 16号字体  文字透明度: 完全不透明// lv_obj_set_style_text_color(ui->screen_btnm_1, lv_color_hex(0xffffff), LV_PART_ITEMS|LV_STATE_DEFAULT); //文字颜色：白色 (0xffffff)// lv_obj_set_style_text_font(ui->screen_btnm_1, &lv_font_montserratMedium_16, LV_PART_ITEMS|LV_STATE_DEFAULT);//字体：lv_font_montserratMedium_16// lv_obj_set_style_text_opa(ui->screen_btnm_1, 255, LV_PART_ITEMS|LV_STATE_DEFAULT);// //圆角半径: 4像素  背景透明度: 完全不透明  背景颜色: 蓝色 #2195f6  渐变方向: 无渐变（纯色）// lv_obj_set_style_radius(ui->screen_btnm_1, 4, LV_PART_ITEMS|LV_STATE_DEFAULT);// lv_obj_set_style_bg_opa(ui->screen_btnm_1, 255, LV_PART_ITEMS|LV_STATE_DEFAULT);// lv_obj_set_style_bg_color(ui->screen_btnm_1, lv_color_hex(0x2195f6), LV_PART_ITEMS|LV_STATE_DEFAULT);//背景颜色：蓝色 (0x2195f6)// lv_obj_set_style_bg_grad_dir(ui->screen_btnm_1, LV_GRAD_DIR_NONE, LV_PART_ITEMS|LV_STATE_DEFAULT);// //阴影设置 阴影宽度: 0（无阴影效果）// lv_obj_set_style_shadow_width(ui->screen_btnm_1, 0, LV_PART_ITEMS|LV_STATE_DEFAULT);//The custom code of screen.//LV_PART_MAIN: 设置整个按钮矩阵容器的样式（白色背景、灰色边框）//LV_PART_ITEMS: 设置容器内每个单独按钮的样式（蓝色背景、白色文字）// ui->screen_label = lv_label_create(ui->screen);// lv_label_set_text(ui->screen_label, "Hello world");// lv_obj_set_style_text_color(ui->screen, lv_color_hex(0xffffff), LV_PART_MAIN);// lv_obj_align(ui->screen_label, LV_ALIGN_CENTER, 0, 0);/////////////////////////////////////////////////////////////////////////////////////////////////////////////// ui->btn = lv_btn_create(ui->screen);     /*Add a button the current screen*/// lv_obj_set_pos(ui->btn, 10, 10);                            /*Set its position*/// lv_obj_set_size(ui->btn, 120, 50);                          /*Set its size*/// lv_obj_add_event_cb(ui->btn, btn_event_cb, LV_EVENT_ALL, NULL);// ui->label = lv_label_create(ui->btn);          /*Add a label to the button*/// lv_label_set_text(ui->label, "Button");                     /*Set the labels text*/// lv_obj_center(ui->label);/////////////////////////////////////////////////////////////////////////////////////////////////////////////style_init();/*Create a button and use the new styles*//* Remove the styles coming from the theme* Note that size and position are also stored as style properties* so lv_obj_remove_style_all will remove the set size and position too */lv_obj_t * btn = lv_btn_create(ui->screen);/* Remove the styles coming from the theme* Note that size and position are also stored as style properties* so lv_obj_remove_style_all will remove the set size and position too */lv_obj_remove_style_all(btn);lv_obj_set_pos(btn, 10, 10);lv_obj_set_size(btn, 120, 50);lv_obj_add_style(btn, &style_btn, 0);lv_obj_add_style(btn, &style_btn_pressed, LV_STATE_PRESSED);/*Add a label to the button*/lv_obj_t * label = lv_label_create(btn);lv_label_set_text(label, "Button");lv_obj_center(label);/*Create another button and use the red style too*/lv_obj_t * btn2 = lv_btn_create(ui->screen);lv_obj_remove_style_all(btn2);                      /*Remove the styles coming from the theme*/lv_obj_set_pos(btn2, 10, 80);lv_obj_set_size(btn2, 120, 50);lv_obj_add_style(btn2, &style_btn, 0);lv_obj_add_style(btn2, &style_btn_red, 0);lv_obj_add_style(btn2, &style_btn_pressed, LV_STATE_PRESSED);lv_obj_set_style_radius(btn2, LV_RADIUS_CIRCLE, 0); /*Add a local style too*/label = lv_label_create(btn2);lv_label_set_text(label, "Button 2");lv_obj_center(label);//Update current screen layout.lv_obj_update_layout(ui->screen);//强制更新屏幕布局// 添加事件监听// lv_obj_add_event_cb(ui->screen_btnm_1, custom_event_handler, LV_EVENT_ALL, NULL);}static void style_init(void)
{/*Create a simple button style*/lv_style_init(&style_btn);lv_style_set_radius(&style_btn, 10);lv_style_set_bg_opa(&style_btn, LV_OPA_COVER);lv_style_set_bg_color(&style_btn, lv_palette_lighten(LV_PALETTE_GREY, 3));lv_style_set_bg_grad_color(&style_btn, lv_palette_main(LV_PALETTE_GREY));lv_style_set_bg_grad_dir(&style_btn, LV_GRAD_DIR_VER);lv_style_set_border_color(&style_btn, lv_color_black());lv_style_set_border_opa(&style_btn, LV_OPA_20);lv_style_set_border_width(&style_btn, 2);lv_style_set_text_color(&style_btn, lv_color_black());/*Create a style for the pressed state.*Use a color filter to simply modify all colors in this state*/static lv_color_filter_dsc_t color_filter;lv_color_filter_dsc_init(&color_filter, darken);lv_style_init(&style_btn_pressed);lv_style_set_color_filter_dsc(&style_btn_pressed, &color_filter);lv_style_set_color_filter_opa(&style_btn_pressed, LV_OPA_20);/*Create a red style. Change only some colors.*/lv_style_init(&style_btn_red);lv_style_set_bg_color(&style_btn_red, lv_palette_main(LV_PALETTE_RED));lv_style_set_bg_grad_color(&style_btn_red, lv_palette_lighten(LV_PALETTE_RED, 3));
}static lv_color_t darken(const lv_color_filter_dsc_t * dsc, lv_color_t color, lv_opa_t opa)
{LV_UNUSED(dsc);return lv_color_darken(color, opa);
}

2.修改custom.h文件

/*
* Copyright 2023 NXP
* NXP Confidential and Proprietary. This software is owned or controlled by NXP and may only be used strictly in
* accordance with the applicable license terms. By expressly accepting such terms or by downloading, installing,
* activating and/or otherwise using the software, you are agreeing that you have read, and that you agree to
* comply with and are bound by, such license terms.  If you do not agree to be bound by the applicable license
* terms, then you may not retain, install, activate or otherwise use the software.
*/#ifndef __CUSTOM_H_
#define __CUSTOM_H_
#ifdef __cplusplus
extern "C" {
#endif#include "../generated/gui_guider.h"static lv_style_t style_btn;
static lv_style_t style_btn_pressed;
static lv_style_t style_btn_red;void custom_init(lv_ui *ui);
void custom_event_handler(lv_event_t *e);
void btn_event_cb(lv_event_t * e);
static lv_color_t darken(const lv_color_filter_dsc_t * dsc, lv_color_t color, lv_opa_t opa);
static void style_init(void);#ifdef __cplusplus
}
#endif
#endif /* EVENT_CB_H_ */

3.运行效果如下：

http://www.dtcms.com/a/554752.html

相关文章：

  • 【更新至 91 个】分子动力学模拟 + 数据处理程序
  • LIBTORCH 再配置总结
  • element-ui源码阅读-样式
  • 重生归来，我要成功 Python 高手--day31 线性回归
  • 网站开发python和c 哪个好住房和城乡建设部科技发展促进中心网站
  • 黑彩网站建设立即优化在哪里
  • 怎么在网上建网站啊东莞网站优化方案
  • 图片做网站连接在线切图网站
  • 模拟 1576. 替换所有的问号
  • 通辽网站开发0475seo做网站卖赚钱吗
  • 品牌营销网站建设流程一学一做短视频网站
  • 养殖网站 模板谷歌搜索引擎seo
  • 智能课堂课程系统源码 – 多端自适应_支持讲师课程
  • 杰理芯片SDK开发-开发环境搭建Code::Blocks
  • redis实战day2（秒杀）
  • 网站建设企划书网站配置系统
  • 深圳做网站优化报价网站增加导航栏
  • STM32H743 cubemx配置 LL库 ADC3 调试笔记
  • 江苏中益建设官方网站工信部网站备案审核
  • 门户网站前期网络采集商家信息免费发布做宣传的网站
  • svg图片做网站背景网站报价单模板
  • 济南 制作网站 公司吗室内装修设计书籍
  • 15.＜Spring Boot 日志＞
  • C语言实现扫雷游戏
  • 鱼吃鱼服务线上智能服务已更新
  • 手机建站平台微点怎么给一个网站做推广
  • 环形缓冲区（ring buffer）
  • 网站服务器租用方法wordpress 下载短代码
  • 零基础能考信创认证吗？报考条件是什么？
  • 免费制作微信小程序的网站企业购