样式 ​

样式在界面设计中起到了至关重要的作用，它可以定义控件的外观、颜色、字体等方面的属性。

更多的详细介绍，可以参考这个链接： https://docs.lvgl.io/8.3/overview/style.html

预定义部分 ​

状态 ​

增加样式 ​

以按钮为例，下面是添加按下状态的例子：

• 点击样式旁边的"+"，选择预定义部分，选择需要修改的状态。
• 点击确认后，将会自动添加一项与预定义部分一样的样式列表。
• 就可以设置需要修改的样式属性。

​

样式分类 ​

• 文字 ：用于设置控件中文字的样式，包括字体、颜色、对齐方式等。
• 圆环 ：用于设置圆环控件的样式，包括圆环的宽度、颜色、形状等。
• 背景 ：用于设置控件的背景样式，包括颜色、透明度、渐变色、图片等。
• 边框 ：用于设置控件的边框样式，包括颜色、透明度、宽度等。
• 内边距 ：用于设置控件的内边距，即控件内容与边框之间的间距。
• 阴影 ：用于设置控件的阴影样式，包括颜色、透明度、宽度、扩散距离等。

文字 ​

更多的详细介绍，可以参考这个链接： https://docs.lvgl.io/8.3/overview/font.html

定义部分支持文字样式可以通过以下属性进行设置：

• 字体 ：控件中使用的字体名称。默认字体为montserrat，中文字体为MiSans。
• 字体颜色 ：文字的颜色。
• 字体透明度 ：文字的透明度。
• 字间距 ：文字之间的间距。
• 行间距 ：文字行之间的间距。
• 字体对齐方式（左右） ：文字在水平方向上的对齐方式，可以是左对齐、居中对齐或右对齐。
• 字体对齐方式（上下） ：文字在垂直方向上的对齐方式，可以是顶部对齐、居中对齐或底部对齐。

例子 ​

1、设置字体颜色、字体透明度

2、设置字间距、行间距

3、设置字体对齐方式

圆弧 ​

圆弧样式可以通过以下属性进行设置：

• 圆弧宽度 ：圆弧的线条宽度。
• 圆弧颜色 ：圆弧的颜色。
• 圆弧透明度 ：圆弧的透明度。
• 圆弧形状 ：圆弧的形状，可以是圆形、椭圆形或其他自定义形状。
• 圆弧图片 ：圆弧的背景图片

例子 ​

1.设置纯色圆环

2.设置图片圆环

背景 ​

背景样式可以通过以下属性进行设置：

• 背景颜色 ：背景的颜色。
• 背景透明度 ：背景的透明度。
• 背景渐变色 ：使用渐变色作为背景，可以定义多个颜色点来创建渐变效果。
• 背景渐变色方向 ：指定渐变色的方向，可以是水平方向、垂直方向或自定义角度。
• 背景图片 ：使用图片作为背景。
• 背景图片透明度 ：背景图片的透明度。
• 背景图片重绘颜色 ：对背景图片进行重新着色（暂不支持）。
• 背景图片重绘透明度 ：对背景图片进行重新设置透明度（暂不支持）。
• 圆角半径 ：设置背景的圆角半径，使其具有圆角效果。

例子 ​

1.设置背景颜色、背景透明度、背景图片、圆角半径

2.背景渐变色、背景渐变方向

边框 ​

边框样式可以通过以下属性进行设置：

• 边框颜色 ：边框的颜色。
• 边框透明度 ：边框的透明度。
• 边框宽度 ：边框的线条宽度。
• 上边框是否显示 ：控制上边框是否显示。
• 下边框是否显示 ：控制下边框是否显示。
• 左边框是否显示 ：控制左边框是否显示。
• 右边框是否显示 ：控制右边框是否显示。

例子 ​

内边距 ​

更多的详细介绍，可以参考这个链接： https://docs.lvgl.io/8.3/overview/coords.html

内边距是指控件内容与其边框之间的空间，可以通过以下属性进行设置：

• 上边距 ：控制内容与上边框之间的距离。
• 右边距 ：控制内容与右边框之间的距离。
• 下边距 ：控制内容与下边框之间的距离。
• 左边距 ：控制内容与左边框之间的距离。

例子 ​

阴影 ​

阴影可以为控件增加层次感和立体感，使其在界面中更加突出和引人注目。

阴影样式可以通过以下属性进行设置：

• 阴影颜色 ：控制阴影的颜色。
• 阴影透明度 ：控制阴影的透明度。
• 阴影宽度 ：控制阴影的宽度。
• 阴影扩散距离 ：控制阴影的扩散程度，即阴影的模糊程度。
• 阴影水平偏移 ：控制阴影在水平方向上的偏移量。
• 阴影垂直偏移 ：控制阴影在垂直方向上的偏移量。

例子 ​