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

一、修改代码

setup_src_screen.c文件

cpp 复制代码

/*
* 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 screen
	ui->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文件

cpp 复制代码

/*
* 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.运行效果如下：

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

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