（ESP-IDF）LVGL XML Components

额外

1、全局变量

globals.xml

<globals>
	<api>
		<!-- Add <enumdefs> here -->
	</api>

	<consts>
		<!-- Add <px>, <int>, <color> etc here -->
		<color name="button_bg_color" value="0x000" />
		<color name="button_txt_color" value="0xfff" />
		<int name="button_height" value="40" />
		<int name="button_width" value="80" />
	</consts>

	<styles>
		<!-- Add <style> tags here -->
	</styles>

	<subjects>
		<!-- Add <int>, <string>, or <float> subjects here -->
	</subjects>

	<images>
		<!-- Add <file> or <data> tags here -->
	</images>

	<fonts>
		<!-- Add <bin> , <tiny_ttf>, <freetype> tags here -->
		<bin name="font_medium" as_file="false" src_path="fonts/Montserrat_Medium.ttf" size="20" bpp="4" />
	</fonts>
</globals>

2、设定屏幕参数

project.xml

<project name="ui_hello_world">
	<targets>
		<target name="target1">
			<display width="240" height="240" radius="120" />
		</target>
	</targets>
</project>

1、创建一个 Component

component/button_i.xml

<component>
	<api>
		<prop name="button_text" type="string" default="Click_me" />
	</api>

	<styles>
		<style
			name="style_btn"
			height="#button_height"
			width="#button_width"
			bg_color="#button_bg_color"
			text_color="#button_txt_color"
		/>
		<style name="style_btn_press" text_color="0xf0f" />
	</styles>

	<view extends="lv_button">
		<style name="style_btn" />
		<style name="style_btn_press" selector="pressed" />
		<lv_label text="$button_text" align="center" />
	</view>
</component>

2、Component 继承 Component

<component>
	<view extends="button_i" style_text_color="0xf0f" />
</component>

3、使用 Component

<screen>
    <view>
        <button_i />
    </view>
</screen>