如何在NiceGUI中创建横向布局的3×3表格？

嘿，我明白你想要的是一个横向排列的3×3表格样式布局对吧？看你给出的代码片段还没写完，但估计是用了默认的垂直堆叠方式，所以才达不到预期的横向效果。我给你两种实用的实现方案，帮你轻松搞定这个需求：

方案一：使用Grid网格布局（推荐） #

Grid布局是最直接实现行列结构的方式，只需要指定列数，内容就会自动按从左到右、从上到下的顺序填充成3×3的结构。

from nicegui import ui

# 先补全你的测试设置数据（假设剩下的内容是类似下面的）
test_settings = {
    "Load duration": "5 min",
    "Requested by": "eldsinghaitenant",
    "Run source": "Manual",
    "Test Result 1": "Pass",
    "Test Result 2": "Fail",
    "Test Result 3": "Pass",
    "Operator": "admin",
    "Test Date": "2024-05-20",
    "Overall Status": "Completed"
}

# 创建3列的网格，设置宽度占满容器
with ui.grid(columns=3).classes("w-full gap-4 p-4 border border-gray-200"):
    # 遍历数据，把每个键值对作为一组放入网格
    for item_label, item_value in test_settings.items():
        with ui.column().classes("items-center"):
            ui.label(f"*{item_label}:*").classes("font-bold")
            ui.label(item_value)

ui.run()

代码说明： #

• ui.grid(columns=3) 指定每行显示3个元素，自动形成3行3列的结构
• 给网格添加border类可以让它看起来更像传统表格的边框样式
• 用ui.column把每个标签和值垂直分组，让每个单元格的内容更规整

方案二：手动嵌套Row和Column布局 #

如果你需要更精细地控制每一行的样式，可以手动创建三行，每行包含三个列组件：

from nicegui import ui

# 第一行内容
with ui.row().classes("w-full justify-around mt-2"):
    with ui.column().classes("items-center"):
        ui.label("Load duration")
        ui.label("5 min")
    with ui.column().classes("items-center"):
        ui.label("Requested by")
        ui.label("eldsinghaitenant")
    with ui.column().classes("items-center"):
        ui.label("Run source")
        ui.label("Manual")

# 第二行内容
with ui.row().classes("w-full justify-around mt-4"):
    with ui.column().classes("items-center"):
        ui.label("Test 1")
        ui.label("Pass")
    with ui.column().classes("items-center"):
        ui.label("Test 2")
        ui.label("Fail")
    with ui.column().classes("items-center"):
        ui.label("Test 3")
        ui.label("Pass")

# 第三行内容
with ui.row().classes("w-full justify-around mt-4"):
    with ui.column().classes("items-center"):
        ui.label("User")
        ui.label("admin")
    with ui.column().classes("items-center"):
        ui.label("Date")
        ui.label("2024-05-20")
    with ui.column().classes("items-center"):
        ui.label("Status")
        ui.label("Completed")

ui.run()

代码说明： #

• ui.row 让内部组件横向排列，ui.column 让内部组件垂直排列
• justify-around 类可以让每行的三个列均匀分布在容器内
• mt-4 类用来设置行与行之间的间距，让布局更美观

备注：内容来源于stack exchange，提问作者Anirban Nag 'tintinmj'