How can I create a multi row radiobutton using a for loop-CodePudding

I'm trying to create a multi row radiobutton for a character selection menu

I created a for loop based radio button indexing the list of characters and their images. When run though, it creates a singular line that trails off outside the window. I could add a scrollbar and leave it as is, but it would look and be better if I could have multiple rows instead.

I've tried creating a second row manually and using the grid method, but it only references the last entry in the index when i do that. I have also setup multiple frames instead to do this, but there will still be more options than the window can hold. So I would need to still end up scrolling up and down as well, but with the multiple frames method, I don't believe thats possible.

Current state of the code:

window = Tk()
window.geometry("800x640")
window.resizable(False, False)

topframe = Frame(window)
topframe.pack(side = TOP)
frame2 = Frame(window)
frame2.pack(side = TOP)
bottomframe = Frame(window)
bottomframe.pack(side= TOP)
#Button!
button = Button(topframe,
                image=unselected,
                command=start_on
                )
button.pack(anchor = N, side = TOP)

for index in range(len(characters)):
 
    rb1 = Radiobutton(frame2,
    compound = TOP,
    image = characterList[index],
    text=characters[index],
    variable=v,
    value=index,
    ).pack(
            side = LEFT, 
            pady = 20,
            padx = 13,
            )

for index in range(7, len(characters)):
 
    rb2 = Radiobutton(bottomframe,
    compound = TOP,
    image = characterList[index],
    text=characters[index],
    variable=v,
    value=index,
    ).pack(
            side = LEFT, 
            pady = 5,
            padx = 13,
            )

for index in range(7, len(characters)):
 
    rb3 = Radiobutton(bottomframe,
    compound = TOP,
    image = characterList[index],
    text=characters[index],
    variable=v,
    value=index,
    ).pack(
            side = LEFT, 
            pady = 5,
            padx = 13,
            )

Using grid:

for index in range(len(characters)):
 
    rb1 = Radiobutton(frame2,
    compound = TOP,
    image = characterList[index],
    text=characters[index],
    variable=v,
    value=index,
    # ).pack(
    #         side = LEFT, 
    #         padx = 13,
    #         )
        ).grid(
            # row = 1, #Shows Only the last entry in the characters index.
            column = 1, #Shows characters in a row only. And does not change position of the row(stays center no matter the int.)
            # rowspan = 3, # Same as using column = 1
            # columnspan = 5, #Same as using column = 1
            #using any combination of column/rowspan/columnspan shows the same as using any of those 3 by itself.
            # adding row = int to any combination of the above does the same as if its all thats being used.
            )

CodePudding user response：

You can put those radiobuttons using .grid() and calculate the row and column based on the index:

for index in range(len(characters)):
    Radiobutton(frame2,
        compound = TOP,
        image = characterList[index],
        text = characters[index],
        variable = v,
        value = index,
    ).grid(
        row = index//10,
        column = index,
    )

The above code will put ten radiobuttons in a row. You can change 10 to other value to suit your requirement.