M5Spinbox

M5Spinbox是一个提供数字输入界面的控件，具有递增和递减按钮。它显示一个数字值，可以通过单击+和-按钮或直接输入来调整。数字输入框支持整数和浮点数，具有可自定义的数字位数和小数精度。

UiFlow2 应用示例

基础数字输入框

在UiFlow2中打开 cores3_spinbox_basic_example.m5f2 项目。

此示例演示如何创建具有可自定义范围和精度设置的数字输入框。

UiFlow2 代码块：

示例输出：

None

MicroPython 应用示例

基础数字输入框

此示例演示如何创建具有可自定义范围和精度设置的数字输入框。

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
spinbox0 = None
label0 = None


def spinbox0_value_changed_event(event_struct):
    global page0, spinbox0, label0
    label0.set_text(str(spinbox0.get_value()))


def spinbox0_event_handler(event_struct):
    global page0, spinbox0, label0
    event = event_struct.code
    if event == lv.EVENT.VALUE_CHANGED and True:
        spinbox0_value_changed_event(event_struct)
    return


def setup():
    global page0, spinbox0, label0

    M5.begin()
    Widgets.setRotation(1)
    m5ui.init()
    page0 = m5ui.M5Page(bg_c=0xFFFFFF)
    spinbox0 = m5ui.M5Spinbox(
        x=60,
        y=100,
        w=200,
        h=40,
        value=50,
        min_value=0,
        max_value=100,
        digit_count=5,
        prec=2,
        font=lv.font_montserrat_14,
        parent=page0,
    )
    label0 = m5ui.M5Label(
        "label0",
        x=138,
        y=166,
        text_c=0x000000,
        bg_c=0xFFFFFF,
        bg_opa=0,
        font=lv.font_montserrat_14,
        parent=page0,
    )

    spinbox0.add_event_cb(spinbox0_event_handler, lv.EVENT.ALL, None)

    page0.screen_load()
    spinbox0.set_border_color(0xFF0000, 255, lv.PART.MAIN | lv.STATE.DEFAULT)


def loop():
    global page0, spinbox0, 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参考

M5Spinbox

class m5ui.spinbox.M5Spinbox(*args, **kwargs)

基类：obj

创建一个数字输入框控件。

参数:

• x (int) – 数字输入框的x位置。

• y (int) – 数字输入框的y位置。

• w (int) – 数字输入框的宽度。

• h (int) – 数字输入框的高度。

• value (int) – 数字输入框的初始值。

• min_value (int) – 数字输入框的最小值。

• max_value (int) – 数字输入框的最大值。

• digit_count (int) – 显示的数字位数。

• prec (int) – 小数位数。

• font (lv.font_t) – 数字输入框使用的字体。

• parent (lv.obj) – 数字输入框的父对象。

set_flag(flag, value)

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

参数:

• flag (int) – 要设置的标志。

• value (bool) – 如果为True，则添加标志；如果为False，则移除标志。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

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

toggle_flag(flag)

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

参数:

flag (int) – 要切换的标志。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

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

set_pos(x, y)

设置数字输入框的位置。

参数:

• x (int) – 数字输入框的x坐标。

• y (int) – 数字输入框的y坐标。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

spinbox_0.set_pos(100, 200)

set_x(x)

设置数字输入框的x坐标。

参数:

x (int) – 数字输入框的x坐标。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

spinbox_0.set_x(150)

set_y(y)

设置数字输入框的y坐标。

参数:

y (int) – 数字输入框的y坐标。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

spinbox_0.set_y(250)

get_width()

获取数字输入框的宽度。

返回:

数字输入框的宽度。

返回类型:

int

UiFlow2 代码块：

MicroPython 代码块：

width = spinbox_0.get_width()

get_height()

获取数字输入框的高度。

返回:

数字输入框的高度。

返回类型:

int

UiFlow2 代码块：

MicroPython 代码块：

height = spinbox_0.get_height()

align_to(obj, align, x, y)

将数字输入框对齐到另一个对象。

参数:

• obj (lv.obj) – 要对齐的对象。

• align (int) – 对齐类型。

• x (int) – 相对于对齐对象的x偏移量。

• y (int) – 相对于对齐对象的y偏移量。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

spinbox_0.align_to(label_0, lv.ALIGN.OUT_BOTTOM_MID, 0, 10)

set_state(state, value)

设置数字输入框的状态。如果 value 为True，则设置状态；如果为False，则取消设置状态。

参数:

• state (int) – 要设置的状态。

• value (bool) – 如果为True，则设置状态；如果为False，则取消设置状态。

返回:

None

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

spinbox_0.set_state(lv.STATE.DISABLED, True)

toggle_state(state)

切换数字输入框的状态。如果状态已设置，则取消设置；如果未设置，则将其设置。

参数:

state (int) – 要切换的状态。

返回:

None

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

spinbox_0.toggle_state(lv.STATE.CHECKED)

set_size(width, height)

设置数字输入框的尺寸。

参数:

• width (int) – 数字输入框的宽度。

• height (int) – 数字输入框的高度。

返回:

None

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

spinbox_0.set_size(150, 40)

set_width(width)

设置数字输入框的宽度。

参数:

width (int) – 数字输入框的宽度。

返回:

None

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

spinbox_0.set_width(180)

set_height(height)

设置数字输入框的高度。

参数:

height (int) – 数字输入框的高度。

返回:

None

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

spinbox_0.set_height(50)

add_event_cb(event_cb, filters, user_data)

为数字输入框添加事件回调。

参数:

• handler (function) – 要调用的回调函数。

• event (int) – 要监听的事件。

• user_data (Any) – 传递给回调的可选用户数据。

UiFlow2 代码块：

MicroPython 代码块：

def spinbox0_value_changed_event(event_struct):
    global page0, spinbox0
    print("value changed:", spinbox0.get_value())

def spinbox0_event_handler(event_struct):
global page0, spinbox0
event = event_struct.code
if event == lv.EVENT.VALUE_CHANGED and True:
    spinbox0_value_changed_event(event_struct)
return

spinbox_0.add_event_cb(spinbox0_event_handler, lv.EVENT.ALL, None)

set_bg_color(color, opa, part)

为对象的指定部分设置背景颜色和透明度。

参数:

• color (int) – 要设置的颜色，可以是整数（十六进制）或lv.color对象。

• opa (int) – 透明度级别（0-255）。

• part (int) – 应用样式的对象部分（例如，lv.PART.MAIN）。

返回:

None

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

spinbox0.set_bg_color(0xFF0000, 255, lv.PART.MAIN | lv.STATE.DEFAULT)

set_border_color(color, opa, part)

为对象的指定部分设置边框颜色和透明度。

参数:

• color (int) – 要设置的颜色，可以是整数（十六进制）或lv.color对象。

• opa (int) – 透明度级别（0-255）。

• part (int) – 应用样式的对象部分（例如，lv.PART.MAIN）。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

spinbox0.set_border_color(0xFF0000, 255, lv.PART.MAIN | lv.STATE.DEFAULT)

set_style_border_width(w, part)

设置数字输入框的边框宽度。

参数:

• w (int) – 边框宽度（以像素为单位）。

• part (int) – 要应用边框宽度的数字输入框部分，例如 lv.PART.MAIN。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

spinbox0.set_style_border_width(10, lv.PART.MAIN | lv.STATE.DEFAULT)

set_style_radius(radius, part)

设置数字输入框的圆角半径。

参数:

• radius (int) – 圆角半径（以像素为单位）。

• part (int) – 要应用圆角半径的数字输入框部分，例如 lv.PART.MAIN。

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

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

set_range(min_value, max_value)

设置数字输入框的取值范围。

参数:

• min_value (float | int) – 数字输入框的最小值。

• max_value (float | int) – 数字输入框的最大值。

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

spinbox0.set_range(0, 100)

set_value(value)

设置数字输入框的值。

参数:

value (float | int) – 要设置的值。

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

spinbox0.set_value(50)

get_value()

获取数字输入框的当前值。

返回:

当前值。

返回类型:

float | int

UiFlow2 代码块：

MicroPython 代码块：

spinbox0.get_value()

set_step(step)

设置数字输入框的步长值。

参数:

step (float | int) – 要设置的步长值。

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

spinbox0.set_step(1)
spinbox0.set_step(0.1)