尝试创建下拉菜单 pygame，但卡住了

Question

到目前为止，这是我的代码：

import pygame as pg
pg.init()
clock = pg.time.Clock()
# Generating screen
w_scr = 640
h_scr = 480
size_scr = (w_scr, h_scr)
screen = pg.display.set_mode(size_scr)

# Define color
COLOR_INACTIVE = (100, 80, 255)
COLOR_ACTIVE = (100, 200, 255)
COLOR_LIST_INACTIVE = (255, 100, 100)
COLOR_LIST_ACTIVE = (255, 150, 150)

class DropDown():
    # Test List
    option_list = ["Calibration", "Test"]

    def __init__(self, color_menu, color_option, x, y, w, h):
        self.color_menu = color_menu
        self.color_option = color_option
        self.x = x
        self.y = y
        self.w = w
        self.h = h

    # Draw the initial button 'select mode'
    def draw_main(self, win, text=''):
        pg.draw.rect(win, self.color_menu, (self.x, self.y, self.w, self.h), 0)
        if text != '':
            font = pg.font.SysFont(None, 30)
            msg = font.render(text, 1, (0, 0, 0))
            screen.blit(msg, (self.x + (self.w / 2 - msg.get_width() / 2), self.y + (self.h / 2 - msg.get_height() / 2)))

    # Draw list of option 'calibration' and 'test'
    def draw_opt(self, win, text=[]):
        opt_list =[]
        if draw:
            for i, el in enumerate(text):
                opt_list.append(pg.draw.rect(win, self.color_option, (self.x, self.y + (i+1)*self.h, self.w, self.h), 0))

                # write each option
                font = pg.font.SysFont(None, 30)
                msg = font.render(text[i], 1, (0, 0, 0))
                screen.blit(msg, (self.x + (self.w / 2 - msg.get_width() / 2),
                                    self.y + (i+1)*self.h + (self.h / 2 - msg.get_height() / 2)))

    # Detect when the mouse is within the 'select mode' box
    def choose_main(self, pos):
        if self.x < pos[0] < self.x + self.w and self.y < pos[1] < self.y + self.h:
            return True
        else:
            return False
    # Detect when the mouse is within the option list
    def choose_opt(self, pos):
        if self.x < pos[0] < self.x + self.w and 2*self.y < pos[1] < 2*self.y + self.h:
            return True
        else:
            return False

这是必要的 class 和属性的定义。我是这样运行的：

# Draw flag initial value
draw = False

# Declare element
list1 = DropDown(COLOR_INACTIVE, COLOR_LIST_INACTIVE, 50, 50, 200, 50)

# Run program
menu = True
while menu:

    screen.fill((255, 255, 255))

    for event in pg.event.get():
        pos = pg.mouse.get_pos()

        if event.type == pg.QUIT:
            pg.quit()
            quit()

        # For the menu
        if event.type == pg.MOUSEMOTION:
            if list1.choose_main(pos):
                list1.color_menu = COLOR_ACTIVE

            else:
                list1.color_menu = COLOR_INACTIVE

        # For the option
        if event.type == pg.MOUSEMOTION:
            if list1.choose_opt(pos):
                list1.color_option = COLOR_LIST_ACTIVE
            else:
                list1.color_option = COLOR_LIST_INACTIVE

        if event.type == pg.MOUSEBUTTONDOWN:
            if event.button == 1 and list1.choose_main(pos):
                if draw == False:
                    draw = True

                elif draw == True:
                    draw = False

    list1.draw_main(screen, "Select Mode")
    list1.draw_opt(screen, ["Calibration", "Test"])

    pg.display.flip()
    clock.tick(30)

pg.quit()

我的问题:

我不知道如何select列表可用时，换句话说，
我不知道如何从这一步进一步发展

我认为它应该如何运作？

while (选项列表可用 = True) -> 选择其中之一 -> select it
但是我没有实现 while 循环，它只是运行s 在无限循环中，我被卡住了。因此，请提供任何帮助:)

注:

我知道主菜单有可用的 GUI 模块，我也尝试过它们，但由于 none 模块的文档很少，我无法正确集成它们，我认为最接近的get 是通过使用 thorpy，但又出现了一个我无法解决的错误。所以我决定自己做。

如果已经成功创建下拉列表模块的人愿意分享他们的，我将不胜感激。

Answer 1

菜单标题、选项和菜单状态应该是 DropDownclass:

的属性

class DropDown():

    def __init__(self, color_menu, color_option, x, y, w, h, font, main, options):
        self.color_menu = color_menu
        self.color_option = color_option
        self.rect = pg.Rect(x, y, w, h)
        self.font = font
        self.main = main
        self.options = options
        self.draw_menu = False
        self.menu_active = False
        self.active_option = -1

    # [...]

list1 = DropDown(
    [COLOR_INACTIVE, COLOR_ACTIVE],
    [COLOR_LIST_INACTIVE, COLOR_LIST_ACTIVE],
    50, 50, 200, 50, 
    pg.font.SysFont(None, 30), 
    "Select Mode", ["Calibration", "Test"])

class应该有一个绘制整个菜单的draw方法：

class DropDown():
    # [...]

    def draw(self, surf):
        pg.draw.rect(surf, self.color_menu[self.menu_active], self.rect, 0)
        msg = self.font.render(self.main, 1, (0, 0, 0))
        surf.blit(msg, msg.get_rect(center = self.rect.center))

        if self.draw_menu:
            for i, text in enumerate(self.options):
                rect = self.rect.copy()
                rect.y += (i+1) * self.rect.height
                pg.draw.rect(surf, self.color_option[1 if i == self.active_option else 0], rect, 0)
                msg = self.font.render(text, 1, (0, 0, 0))
                surf.blit(msg, msg.get_rect(center = rect.center))

class 应该有一个 update 方法来接收事件、更改菜单的状态，以及 returns 所选选项的索引：

class DropDown():
    # [...]

    def update(self, event_list):
        mpos = pg.mouse.get_pos()
        self.menu_active = self.rect.collidepoint(mpos)
        
        self.active_option = -1
        for i in range(len(self.options)):
            rect = self.rect.copy()
            rect.y += (i+1) * self.rect.height
            if rect.collidepoint(mpos):
                self.active_option = i
                break

        if not self.menu_active and self.active_option == -1:
            self.draw_menu = False

        for event in event_list:
            if event.type == pg.MOUSEBUTTONDOWN and event.button == 1:
                if self.menu_active:
                    self.draw_menu = not self.draw_menu
                elif self.draw_menu and self.active_option >= 0:
                    self.draw_menu = False
                    return self.active_option
        return -1

while run:

    event_list = pg.event.get()
    for event in event_list:
        # [...]

    selected_option = list1.update(event_list)
    if selected_option >= 0:
        # [...]

    # [...]

完整示例：

import pygame as pg

class DropDown():

    def __init__(self, color_menu, color_option, x, y, w, h, font, main, options):
        self.color_menu = color_menu
        self.color_option = color_option
        self.rect = pg.Rect(x, y, w, h)
        self.font = font
        self.main = main
        self.options = options
        self.draw_menu = False
        self.menu_active = False
        self.active_option = -1

    def draw(self, surf):
        pg.draw.rect(surf, self.color_menu[self.menu_active], self.rect, 0)
        msg = self.font.render(self.main, 1, (0, 0, 0))
        surf.blit(msg, msg.get_rect(center = self.rect.center))

        if self.draw_menu:
            for i, text in enumerate(self.options):
                rect = self.rect.copy()
                rect.y += (i+1) * self.rect.height
                pg.draw.rect(surf, self.color_option[1 if i == self.active_option else 0], rect, 0)
                msg = self.font.render(text, 1, (0, 0, 0))
                surf.blit(msg, msg.get_rect(center = rect.center))

    def update(self, event_list):
        mpos = pg.mouse.get_pos()
        self.menu_active = self.rect.collidepoint(mpos)
        
        self.active_option = -1
        for i in range(len(self.options)):
            rect = self.rect.copy()
            rect.y += (i+1) * self.rect.height
            if rect.collidepoint(mpos):
                self.active_option = i
                break

        if not self.menu_active and self.active_option == -1:
            self.draw_menu = False

        for event in event_list:
            if event.type == pg.MOUSEBUTTONDOWN and event.button == 1:
                if self.menu_active:
                    self.draw_menu = not self.draw_menu
                elif self.draw_menu and self.active_option >= 0:
                    self.draw_menu = False
                    return self.active_option
        return -1

pg.init()
clock = pg.time.Clock()
screen = pg.display.set_mode((640, 480))

COLOR_INACTIVE = (100, 80, 255)
COLOR_ACTIVE = (100, 200, 255)
COLOR_LIST_INACTIVE = (255, 100, 100)
COLOR_LIST_ACTIVE = (255, 150, 150)

list1 = DropDown(
    [COLOR_INACTIVE, COLOR_ACTIVE],
    [COLOR_LIST_INACTIVE, COLOR_LIST_ACTIVE],
    50, 50, 200, 50, 
    pg.font.SysFont(None, 30), 
    "Select Mode", ["Calibration", "Test"])

run = True
while run:
    clock.tick(30)

    event_list = pg.event.get()
    for event in event_list:
        if event.type == pg.QUIT:
            run = False

    selected_option = list1.update(event_list)
    if selected_option >= 0:
        list1.main = list1.options[selected_option]

    screen.fill((255, 255, 255))
    list1.draw(screen)
    pg.display.flip()
    
pg.quit()
exit()

另见 UI elements

尝试创建下拉菜单 pygame，但卡住了

trying creating dropdown menu pygame, but got stuck

python

pygame

menu

python-3.x

drop-down-menu