Estilo LVGL V8

Language 2023-08-23 03:42:15 views: null

modelo de caixa

Crie um objeto lv_obj_t * cont = lv_obj_create(parent);
defina o tamanho do objeto lv_obj_set_size(cont, 320,30);
content content height = obj height - border width * 2 - preencha a altura do preenchimento superior - preencha a altura do preenchimento inferior

estilo

insira a descrição da imagem aqui

(1) Parâmetros de interface de estilo

parâmetro 1

O objeto a ser estilizado

parâmetro 2

Defina o valor do estilo,
descrições detalhadas como largura, cor, gradiente, transparência, etc.

cor

Nome do Atributo significado
cor_bg cor de fundo
Cor da borda Cor da borda
cor_do_contorno cor do contorno
cor_sombra cor da sombra
cor do texto cor do texto

Gradiente

Nome do Atributo significado
cor_bg cor primária
bg_grad_color Cor gradiente
bg_grad_dir direção do gradiente
bg_main_stop posição inicial do gradiente
bg_grad_stop Posição final do gradiente
bg_dither_mode modo de renderização

transparência

Nome do Atributo significado
bg_opa transparência de fundo
fronteira_opa transparência nas fronteiras
esboço_opa Transparência do contorno
sombra_opa transparência de sombra
texto_opa transparência de texto
opa transparência geral

parâmetro 3

Valores OR-ed de estados e partes onde os estilos devem ser adicionados

Estados

Lv_state_default (0x0000) Normal, libere estado
lv_state_checked (0x0001) alternar ou verifique o estado
lv_state_focused (0x0002) foco via teclado ou codificador ou clique via touchpad/mouse lv_state_focus_key (0x0004) foco via chaveiro
ou touchpad ou touchpad/mouse mas não
0x0008) editado pelo codificador
LV_STATE_HOVERED (0x0010) mouse pairado (não suportado agora)
LV_STATE_PRESSED (0x0020) pressionado LV_STATE_SCROLLED (0x0040) rolagem LV_STATE_DISABLED ( 0x0080)
estado
desativado
LV_STATE_USER_1 (0 x1000) estado personalizado
LV_STATE_USE R_2 (0x2000) Estado personalizado
LV_STATE_USER_3 (0x4000) Personalizado estado
LV_STATE_USER_4 (0x8000) Estado personalizado

Peças

nome da macro valor papel efeito
LV_PART_MAIN 0x000000 fundo fundo tipo retângulo
LV_PART_SCROLLBAR 0x010000 Barra de rolagem
LV_PART_INDICATOR 0x020000 índice Caixas de seleção, como controles deslizantes, barras, interruptores ou caixas de seleção
LV_PART_KNOB 0x030000 botão Como uma alça para pegar o valor de ajuste
LV_PART_SELECTED 0x040000 foco Indica a opção ou seção atualmente selecionada
LV_PART_ITEMS 0x050000 folha Se o widget tiver vários elementos semelhantes (por exemplo, células de tabela)
LV_PART_TICKS 0x060000 escala Por exemplo, para gráficos ou medidores
LV_PART_CURSOR 0x070000 marca por exemplo, cursores para áreas de texto ou diagramas
LV_PART_CUSTOM_FIRST 0x080000 Widgets personalizados podem ser adicionados aqui
LV_PART_ANY 0x0F0000 Valores especiais podem ser usados ​​em algumas funções para todas as partes do alvo

Cada Widgets (componente) é composto pelas partes acima (partes).
Por exemplo:
o componente Slider contém três partes:
fundo (LV_PART_MAIN),
indicador (LV_PART_INDICATOR),
botão (LV_PART_KNOB)

adicionar estilo


Adicione estilo 0 aos estados e peças selecionados. Equivalente a LV_PART_MAIN, LV_STATE_DEFAULT.
LV_STATE_PRESSED: Adiciona estilo à parte de fundo do estado pressionado. LV_PART_MAIN pode ser omitido.
LV_PART_SCROLLBAR: Adicionado à parte da barra de rolagem no estado padrão. LV_STATE_DEFAULT pode ser omitido.
LV_PART_SCROLLBAR | LV_STATE_SCROLLED: adiciona estilos à parte da barra de rolagem quando o objeto é rolado.
LV_PART_INDICATOR | LV_STATE_PRESSED | LV_STATE_CHECKED Adiciona estilo à parte do indicador quando um objeto é pressionado e verificado simultaneamente.

(2), esboço do esboço

O tamanho do objeto não inclui o contorno, que geralmente é usado para focar o objeto ao usar o botão físico

void lv_obj_set_style_outline_width(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_outline_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_outline_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_outline_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_outline_pad(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);

insira a descrição da imagem aqui

(3), fundo do corpo

O plano de fundo inclui borda, preenchimento e sombra

void lv_obj_set_style_bg_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_grad_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_grad_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_grad_dir(struct _lv_obj_t * obj, lv_grad_dir_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_main_stop(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_grad_stop(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_grad(struct _lv_obj_t * obj, const lv_grad_dsc_t * value, lv_style_selector_t selector);

void lv_obj_set_style_bg_dither_mode(struct _lv_obj_t * obj, lv_dither_mode_t value, lv_style_selector_t selector);

//设置对象背景图片来源
void lv_obj_set_style_bg_img_src(struct _lv_obj_t * obj, const void * value, lv_style_selector_t selector);
//设置图片透明度
void lv_obj_set_style_bg_img_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
// 设置样式图片重新着色
void lv_obj_set_style_bg_img_recolor(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_img_recolor_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
// 设置样式图片重新着色透明度
void lv_obj_set_style_bg_img_recolor_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_img_tiled(struct _lv_obj_t * obj, bool value, lv_style_selector_t selector);

Defina a imagem de fundo, img_src_good_rel é exibido por padrão e img_src_good_pre é exibido quando pressionado

lv_obj_set_style_bg_img_src(obj1, &img_src_good_rel, 0);
lv_obj_set_style_bg_img_src(obj1, &img_src_good_pre, LV_STATE_PRESSED);

insira a descrição da imagem aqui

1. fronteira

void lv_obj_set_style_border_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
//设置样式边框过滤颜色
void lv_obj_set_style_border_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
//设置边框的 opcitiy。值0，LV_OPA_0或LV_OPA_TRANSP表示完全透明，256，LV_OPA_100或LV_OPA_COVER表示完全覆盖，其他值或LV_OPA_10、LV_OPA_20等表示半透明。
void lv_obj_set_style_border_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_border_width(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
//设置应绘制边框的任何一侧
void lv_obj_set_style_border_side(struct _lv_obj_t * obj, lv_border_side_t value, lv_style_selector_t selector);
//设置是在绘制子项之前还是之后绘制边框。true: 子类之后, false: 子类之前
void lv_obj_set_style_border_post(struct _lv_obj_t * obj, bool value, lv_style_selector_t selector);

O significado do valor do parâmetro de entrada 2 da função lv_obj_set_style_border_side:

enum {
    
    
    LV_BORDER_SIDE_NONE     = 0x00,  //无边框
    LV_BORDER_SIDE_BOTTOM   = 0x01,  //底部边框
    LV_BORDER_SIDE_TOP      = 0x02,  //顶部边框
    LV_BORDER_SIDE_LEFT     = 0x04,  //左边边框
    LV_BORDER_SIDE_RIGHT    = 0x08,  //右边边框
    LV_BORDER_SIDE_FULL     = 0x0F,  //四周边框
    LV_BORDER_SIDE_INTERNAL = 0x10, /**< FOR matrix-like objects (e.g. Button matrix) 对于矩阵类对象(例如按钮矩阵)*/
};
typedef uint8_t lv_border_side_t;

2. preenchimento

void lv_obj_set_style_pad_top(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_pad_bottom(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_pad_left(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_pad_right(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_pad_row(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_pad_column(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);

margem superior pad_top: define o preenchimento na parte superior. Isso torna a área de conteúdo menor nessa direção.
margem inferior pad_bottom: Defina o preenchimento na parte inferior. Isso torna a área de conteúdo menor nessa direção. .margem esquerda
pad_left: Defina o preenchimento à esquerda. Isso torna a área de conteúdo menor nessa direção.
margem direita pad_right: Defina o preenchimento no lado direito. Isso torna a área de conteúdo menor nessa direção.

Margempad_row: Defina o preenchimento entre as linhas. Usado por layouts.

Crie dois contêineres container_row1, container_row2 e compare a diferença na configuração pad_row

lv_obj_t * container_row1 = lv_obj_create(lv_scr_act()); // 创建一个对象container_row1
lv_obj_set_size(container_row1, 500, 75); // 设置对象大小
lv_obj_align(container_row1, LV_ALIGN_TOP_MID, 0, 5); // 设置对象基于屏幕中间对齐
lv_obj_set_flex_flow(container_row1, LV_FLEX_FLOW_ROW); // 设置对象使用基于行的流失弹性布局flex

lv_obj_t * container_row2 = lv_obj_create(lv_scr_act()); // 创建一个对象container_row2
lv_obj_set_size(container_row2, 500, 75); // 设置对象大小
// 设置对象container_row2基于对象container_row1外部下方中间对齐
lv_obj_align_to(container_row2, container_row1, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
lv_obj_set_flex_flow(container_row2, LV_FLEX_FLOW_ROW); // 设置对象使用基于行的流失弹性布局flex
lv_obj_set_style_pad_ver(container_row2, 0, 0); // 设置对象内部水平方向的填充为0
lv_obj_set_style_pad_row(container_row2, 0, 0);  // 设置对象container_row2内部item之间的行间距填充为0
lv_obj_set_style_pad_column(container_row2, 1, 0); // 设置对象container_row2内部item之间的列间距填充为1

Crie rótulos no contêiner

lv_obj_t * obj = NULL;
lv_obj_t * label = NULL;

static lv_style_t btn_style;
lv_style_init(&btn_style); // 初始化样式
lv_style_set_radius(&btn_style, 0); // 设置样式圆角为0

for(i = 0; i < 10; i++)
{
    
    
	obj = lv_btn_create(container_row1); // 基于container_row1对象添加button对象
	lv_obj_set_size(obj, 100, LV_PCT(100)); // 设置对象大小
	
	label = lv_label_create(obj); // 创建按键对象创建label对象
	lv_label_set_text_fmt(label, "Item: %d", i); // 设置label文本
	lv_obj_center(label); // label对象居中显示
}

for(i = 0; i < 4; i++)
{
    
    
	obj= lv_btn_create(container_row2);
	lv_obj_add_style(obj, &btn_style, 0);
	lv_obj_set_size(obj, 100, LV_PCT(100));
	
	label = lv_label_create(obj);
	lv_label_set_text_fmt(label, "Item: %d", i);
	lv_obj_center(label);
}

insira a descrição da imagem aqui
margem da colunapad_column: defina o preenchimento entre colunas. Usado por layouts.
Vários atributos abreviados também são encapsulados dentro do lvgl: você pode usar ...pad_all() para definir as margens superior, inferior, esquerda e direita juntas; ou usar ...pad_hor() e ...pad_ver() para definir horizontalmente e margens verticais; você também pode usar ...pad_gap() define o espaçamento entre linhas e colunas.

Crie dois contêineres container_row1, container_row2 e compare a diferença na configuração pad_column

lv_obj_t * container_col1 = lv_obj_create(lv_scr_act());
lv_obj_set_size(container_col1, 100, 250); // 设置对象大小
 // 设置对象container_col1基于对象container_row2外部下方中间对齐
lv_obj_align_to(container_col1, container_row2, LV_ALIGN_OUT_BOTTOM_MID, -100, 20);
lv_obj_set_flex_flow(container_col1, LV_FLEX_FLOW_COLUMN); // 设置对象使用基于列的流失弹性布局flex

lv_obj_t * container_col2 = lv_obj_create(lv_scr_act());
lv_obj_set_size(container_col2, 100, 250); // 设置对象大小
// 设置对象container_col2基于对象container_row2外部下方中间对齐
lv_obj_align_to(container_col2, container_row2, LV_ALIGN_OUT_BOTTOM_MID, 100, 20);
lv_obj_set_flex_flow(container_col2, LV_FLEX_FLOW_COLUMN);  // 设置对象使用基于列的流失弹性布局flex
lv_obj_set_style_pad_hor(container_col2, 0, 0);  // 设置对象内部垂直方向的填充为0
lv_obj_set_style_pad_row(container_col2, 1, 0); // 设置对象container_col2内部item之间的行间距填充为1
lv_obj_set_style_pad_column(container_col2, 0, 0); // 设置对象container_col2内部item之间的列间距填充为0

for(i = 0; i < 10; i++)
{
    
    
	obj = lv_btn_create(container_col1);
	lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
	
	label = lv_label_create(obj);
	lv_label_set_text_fmt(label, "Item: %d", i);
	lv_obj_center(label);
}
 
for(i = 0; i < 4; i++)
{
    
    
	obj = lv_btn_create(container_col2);
	lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
	lv_obj_add_style(obj, &btn_style, 0);
	
	label = lv_label_create(obj);
	lv_label_set_text_fmt(label, "Item: %d", i);
	lv_obj_center(label);
}

insira a descrição da imagem aqui

3, sombra sombra

Você pode definir a largura da sombra, direção do deslocamento, cor, transparência

void lv_obj_set_style_shadow_width(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_shadow_ofs_x(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_shadow_ofs_y(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_shadow_spread(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_shadow_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
//设置样式阴影颜色过滤
void lv_obj_set_style_shadow_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
//设置阴影的不透明度。值0，LV_OPA_0或LV_OPA_TRANSP表示完全透明，256，LV_OPA_100或LV_OPA_COVER表示完全覆盖，其他值或LV_OPA_10、LV_OPA_20等表示半透明。
void lv_obj_set_style_shadow_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);

insira a descrição da imagem aqui

(4), conteúdo de conteúdo

1. O conteúdo é uma imagem

void lv_obj_set_style_img_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_img_recolor(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_img_recolor_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_img_recolor_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);

2. O conteúdo é um segmento de linha

void lv_obj_set_style_line_width(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_line_dash_width(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_line_dash_gap(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_line_rounded(struct _lv_obj_t * obj, bool value, lv_style_selector_t selector);
void lv_obj_set_style_line_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_line_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_line_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);

3. O conteúdo é arco

void lv_obj_set_style_arc_width(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_arc_rounded(struct _lv_obj_t * obj, bool value, lv_style_selector_t selector);
void lv_obj_set_style_arc_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_arc_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_arc_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_arc_img_src(struct _lv_obj_t * obj, const void * value, lv_style_selector_t selector);

4. O conteúdo é texto

//设置样式文本字颜色
void lv_obj_set_style_text_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);    
//设置样式文本字颜色过滤色    
void lv_obj_set_style_text_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
//设置样式文本字透明度
void lv_obj_set_style_text_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);      
//设置样式文本字字体 
void lv_obj_set_style_text_font(struct _lv_obj_t * obj, const lv_font_t * value, lv_style_selector_t selector);  
//设置样式文本字符间隔
void lv_obj_set_style_text_letter_space(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector); 
//设置样式文本行间距 
void lv_obj_set_style_text_line_space(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);  
//设置样式文本装饰划线
void lv_obj_set_style_text_decor(struct _lv_obj_t * obj, lv_text_decor_t value, lv_style_selector_t selector);  
void lv_obj_set_style_text_align(struct _lv_obj_t * obj, lv_text_align_t value, lv_style_selector_t selector);

(5), outro

//设置样式的圆角弧度
void lv_obj_set_style_radius(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);

//子对象超出父对象部分隐藏
void lv_obj_set_style_clip_corner(struct _lv_obj_t * obj, bool value, lv_style_selector_t selector);

insira a descrição da imagem aqui


void lv_obj_set_style_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_color_filter_dsc(struct _lv_obj_t * obj, const lv_color_filter_dsc_t * value,lv_style_selector_t selector);
void lv_obj_set_style_color_filter_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_anim_time(struct _lv_obj_t * obj, uint32_t value, lv_style_selector_t selector);
void lv_obj_set_style_anim_speed(struct _lv_obj_t * obj, uint32_t value, lv_style_selector_t selector);
void lv_obj_set_style_transition(struct _lv_obj_t * obj, const lv_style_transition_dsc_t * value,lv_style_selector_t selector);
void lv_obj_set_style_blend_mode(struct _lv_obj_t * obj, lv_blend_mode_t value, lv_style_selector_t selector);
void lv_obj_set_style_layout(struct _lv_obj_t * obj, uint16_t value, lv_style_selector_t selector);


//修改布局排列方向
void lv_obj_set_style_base_dir(struct _lv_obj_t * obj, lv_base_dir_t value, lv_style_selector_t selector);

Os valores possíveis para direção são

enum {
    
    
    LV_BASE_DIR_LTR      = 0x00,
    LV_BASE_DIR_RTL      = 0x01,
    LV_BASE_DIR_AUTO     = 0x02,

    LV_BASE_DIR_NEUTRAL  = 0x20,
    LV_BASE_DIR_WEAK     = 0x21,
};

typedef uint8_t lv_base_dir_t;

por exemplo:

static void lv_example_flex_6(void)
{
    
    
    lv_obj_t* cont = lv_obj_create(lv_scr_act()); //当前活动界面创建obj对象
    lv_obj_set_style_base_dir(cont, LV_BASE_DIR_RTL, 0); // right to left方向
    lv_obj_set_size(cont, 300, 220); //设置大小
    lv_obj_center(cont); // 居中显示
    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP); //设置LV_FLEX_FLOW_ROW_WRAP方式排列
    uint32_t i;
    for (i = 0; i < 20; i++) {
    
    
        lv_obj_t* obj = lv_obj_create(cont); //在cont对象上创建obj对象
        lv_obj_set_size(obj, 70, LV_SIZE_CONTENT); //设置大小
        lv_obj_t* label = lv_label_create(obj); //创建label
        lv_label_set_text_fmt(label, "%d", i); //设置显示内容
        lv_obj_center(label); // 居中显示
    }
}

insira a descrição da imagem aqui

//修改排列方向为LV_BASE_DIR_LTR
lv_obj_set_style_base_dir(cont, LV_BASE_DIR_LTR, 0);

insira a descrição da imagem aqui

Acho que você gosta

Origin blog.csdn.net/m0_37187962/article/details/125451382
Recomendado
Clasificación
Diario
Más
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(0)
2024-06-03(0)
2024-06-02(0)
2024-06-01(0)
2024-05-31(0)
2024-05-30(0)

Code World

© 2018 codetd.com