M5Slider

M5Slider是一个可以在用户界面中创建滑块的控件。它允许用户通过沿着轨道拖动手柄来从范围内选择一个值。

UiFlow2 应用示例

基础滑块

在UiFlow2中打开|cores3_slider_basic_example.m5f2|项目。

此示例创建一个基础滑块，可以用来选择0到100之间的值。

UiFlow2 代码块：

示例输出：

None

MicroPython 应用示例

基础滑块

此示例创建一个基础滑块，可以用来选择0到100之间的值。

MicroPython 代码块：

# SPDX-FileCopyrightText: 2025 M5Stack Technology CO LTD
#
# SPDX-License-Identifier: MIT

import os, sys, io
import M5
from M5 import *
import m5ui
import lvgl as lv


page0 = None
slider0 = None
label0 = None


def slider0_value_changed_event(event_struct):
    global page0, slider0, label0
    label0.set_text(str(slider0.get_value()))


def slider0_event_handler(event_struct):
    global page0, slider0, label0
    event = event_struct.code
    if event == lv.EVENT.VALUE_CHANGED and True:
        slider0_value_changed_event(event_struct)
    return


def setup():
    global page0, slider0, label0

    M5.begin()
    Widgets.setRotation(1)
    m5ui.init()
    page0 = m5ui.M5Page(bg_c=0xFFFFFF)
    slider0 = m5ui.M5Slider(
        x=60,
        y=110,
        w=200,
        h=19,
        mode=lv.slider.MODE.NORMAL,
        min_value=0,
        max_value=100,
        value=25,
        bg_c=0x2193F3,
        color=0x2193F3,
        parent=page0,
    )
    label0 = m5ui.M5Label(
        "25",
        x=151,
        y=142,
        text_c=0x000000,
        bg_c=0xFFFFFF,
        bg_opa=0,
        font=lv.font_montserrat_14,
        parent=page0,
    )

    slider0.add_event_cb(slider0_event_handler, lv.EVENT.ALL, None)

    page0.screen_load()


def loop():
    global page0, slider0, label0
    M5.update()


if __name__ == "__main__":
    try:
        setup()
        while True:
            loop()
    except (Exception, KeyboardInterrupt) as e:
        try:
            m5ui.deinit()
            from utility import print_error_msg

            print_error_msg(e)
        except ImportError:
            print("please update to latest firmware")

示例输出：

None

API参考

M5Slider

class m5ui.slider.M5Slider(*args, **kwargs)

基类：slider

创建一个滑块小部件。

参数:

x – 滑块的 x 位置。
y – 滑块的 y 位置。
w – 滑块的宽度。
h – 滑块的高度。
mode – 仅支持“lv.slider.MODE.NORMAL”。
min_value – 范围的最小值。
max_value – 范围的最大值。
value – 滑块的当前值。
bg_c – 设置滑块的背景颜色。
color – 滑块指示器的颜色。
parent – 滑块的父对象。如果未指定，则将被设置为活动屏幕。

UiFlow2 代码块：

None

MicroPython 代码块：

from m5ui import M5Slider
import lvgl as lv

slider_0 = M5Slider(x=50, y=50, w=200, h=20, min_value=0, max_value=100, value=25)

set_flag(flag, value)

设置对象上的标志。如果 value 为True，则添加标志；如果为False，则移除标志。

参数:

flag (int) – 要设置的标志。
value (bool) – 如果为True，则添加标志；如果为False，则移除标志。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

slider_0.set_flag(lv.obj.FLAG.HIDDEN, True)

toggle_flag(flag)

切换对象上的标志。如果标志已设置，则移除它；如果未设置，则添加它。

参数:: flag (int) – 要切换的标志。
返回:: None

UiFlow2 代码块：

MicroPython 代码块：

slider_0.toggle_flag(lv.obj.FLAG.HIDDEN)

set_state(state, value)

设置滑块的状态。如果 value 为 True，则设置状态；如果为 False，则取消设置状态。

参数:

state (int) – 要设置的状态。
value (bool) – 如果为 True，则状态已设置；如果为 False，则状态未设置。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

slider_0.set_state(lv.STATE.PRESSED, True)

toggle_state(state)

切换滑块的状态。如果滑块状态已设置，则表示取消设置；如果滑块状态未设置，则表示设置。

参数:: state (int) – 要切换的标志。
返回:: None

UiFlow2 代码块：

MicroPython 代码块：

slider_0.toggle_state(lv.STATE.PRESSED)

add_event_cb(handler, event, user_data)

为滑块添加事件回调。当指定的事件发生时，将调用回调函数。

参数:

handler (function) – 要调用的回调函数。
event (int) – 要监听的事件。
user_data (Any) – 传递给回调函数的可选用户数据。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

def slider_0_value_changed_event(event_struct):
    global slider_0
    value = slider_0.get_value()
    print(f"Slider value changed to: {value}")

def slider_0_event_handler(event_struct):
    global slider_0
    event = event_struct.code
    if event == lv.EVENT.VALUE_CHANGED:
        slider_0_value_changed_event(event_struct)
    return

slider_0.add_event_cb(slider_0_event_handler, lv.EVENT.ALL, None)

set_bg_color(color, opa, part)

设置滑块的背景颜色。

参数:

color (int) – 要设置的颜色。
opa (int) – 颜色的不透明度。值应在0（透明）和255（不透明）之间。
part (int) – 要应用样式的对象部分（例如，lv.PART.MAIN，lv.PART.INDICATOR）。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

slider_0.set_bg_color(lv.color_hex(0x2196F3), 255, lv.PART.INDICATOR | lv.STATE.DEFAULT)

set_style_radius(radius, part)

设置滑块组件的角半径。

参数:

radius (int) – 要设置的半径。
part (int) – 要应用样式的对象部分（例如，lv.PART.MAIN，lv.PART.KNOB）。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

slider_0.set_style_radius(10, lv.PART.MAIN | lv.STATE.DEFAULT)

set_bg_grad_color(color, opa, grad_color, grad_opd, grad_dir, part)

设置滑块的背景颜色。

参数:

color (int) – 渐变的起始颜色，可以是整数（RGB）。
opa (int) – 起始颜色的不透明度（0-255）。
grad_color (int) – 渐变的结束颜色，可以是整数（RGB）。
grad_opd (int) – 结束颜色的不透明度（0-255）。
grad_dir (int) – 渐变的方向（例如，lv.GRAD_DIR.VER）。
part (int) – 要应用样式的对象部分（例如，lv.PART.MAIN，lv.PART.KNOB）。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

bar.set_bg_grad_color(0x00FF00, 255, 0xFF0000, 255, lv.GRAD_DIR.HOR, lv.PART.MAIN | lv.STATE.DEFAULT)
bar.set_bg_grad_color(0x00FF00, 255, 0xFF0000, 255, lv.GRAD_DIR.HOR, lv.PART.INDICATOR | lv.STATE.DEFAULT)

get_value()

获取滑块的当前值。

返回:: 滑块的当前值。
返回类型:: int

UiFlow2 代码块：

MicroPython 代码块：

value = slider_0.get_value()

set_mode(mode): 设置滑块的模式。

get_min_value()

范围的最小值。

返回:: 范围的最小值。
返回类型:: int

UiFlow2 代码块：

MicroPython 代码块：

min_value = slider_0.get_min_value()

get_max_value()

范围的最大值。

返回:: 范围的最大值。
返回类型:: int

UiFlow2 代码块：

MicroPython 代码块：

max_value = slider_0.get_max_value()

set_pos(x, y)

设置滑块的位置。

参数:

x (int) – 滑块的x坐标。
y (int) – 滑块的y坐标。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

slider_0.set_pos(100, 100)

set_x(x)

设置滑块的x坐标。

参数:: x (int) – 滑块的x坐标。
返回:: None

UiFlow2 代码块：

MicroPython 代码块：

slider_0.set_x(100)

set_y(y)

设置滑块的y坐标。

参数:: y (int) – 滑块的y坐标。
返回:: None

UiFlow2 代码块：

MicroPython 代码块：

slider_0.set_y(100)

align_to(obj, align, x, y)

将滑块与另一个对象对齐。

参数:

obj (lv.obj) – 要对齐的对象。
align (int) – 对齐类型。
x (int) – 与对齐对象的 x 偏移量。
y (int) – 与对齐对象的 y 偏移。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

slider_0.align_to(page_0, lv.ALIGN.CENTER, 0, 0)

set_size(width, height)

设置滑块的尺寸。

参数:

width (int) – 滑块的宽度。
height (int) – 滑块的高度。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

slider_0.set_size(200, 20)

set_width(width)

设置滑块的宽度。

参数:: width (int) – 滑块的宽度。
返回:: None

UiFlow2 代码块：

MicroPython 代码块：

slider_0.set_width(200)

get_width()

获取滑块的宽度。

返回:: 滑块的宽度。
返回类型:: int

UiFlow2 代码块：

MicroPython 代码块：

slider_0.get_width()

set_height(height)

设置滑块的高度。

参数:: height (int) – 滑块的高度。
返回:: None

UiFlow2 代码块：

MicroPython 代码块：

slider_0.set_height(20)

get_height()

获取滑块的高度。

返回:: 滑块的高度。
返回类型:: int

UiFlow2 代码块：

MicroPython 代码块：

slider_0.get_height()

set_value(value, anim=False)

设置滑块的值。

参数:

value (int) – 要设置的值。
anim (bool) – 是否使用动画效果进行更改。

返回:

None

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

slider_0.set_value(50, True)

set_range(min_value, max_value)

设置滑块的范围。

参数:

min_value (int) – 范围的最小值。
max_value (int) – 范围的最大值。

返回:

None

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

slider_0.set_range(0, 200)