如何在Gradio中用gr.Row与gr.Column实现Chatbot动态垂直缩放

问题描述 #

需要构建一个包含两列的Gradio布局：

• 左列：放置多个复选框（固定宽度）
• 右列：包含gr.Chatbot和gr.TextBox，要求gr.Chatbot能随浏览器窗口大小变化动态垂直缩放高度，占满可用最大空间。

当前使用嵌套行列的代码中，gr.Chatbot为固定高度，无法自动调整：

with gr.Blocks(fill_height=True,fill_width=True) as demo:
    with gr.Row(): 
        with gr.Column(scale=0,min_width=210):  # Fixed size for first column
            gr.Checkbox(label="label1")
            gr.Checkbox(label="label2")  
        with gr.Column(scale=1):  # Resizable column for chatbot and input
            chatbot_output = gr.Chatbot(scale=1,elem_id="chatbot",type="messages")
            user_input = gr.Textbox(scale=0,show_label=False, placeholder="Enter your message...")
            user_input.submit(chatbot_response, user_input, chatbot_output)

单组件时可实现自适应的参考代码：

with gr.Blocks(fill_height=True,fill_width=True) as demo:
    chatbot_output = gr.Chatbot(scale=1,elem_id="chatbot",type="messages")
    user_input = gr.Textbox(scale=0,show_label=False, placeholder="Enter your message...")
    user_input.submit(chatbot_response, user_input, chatbot_output)

解决方案 #

通过3处关键修改，实现gr.Chatbot的动态高度自适应：

1. 给外层gr.Row添加fill_height=True，确保整行填充Blocks的可用高度
2. 给右侧gr.Column添加fill_height=True，让其随Row高度同步变化
3. 给gr.Chatbot设置height="100%"，使其占满所在Column的剩余垂直空间（TextBox会固定在底部）

修改后的完整代码：

with gr.Blocks(fill_height=True, fill_width=True) as demo:
    with gr.Row(fill_height=True):  # 让行填充垂直空间
        with gr.Column(scale=0, min_width=210):
            gr.Checkbox(label="label1")
            gr.Checkbox(label="label2")
        with gr.Column(scale=1, fill_height=True):  # 右列填充垂直空间
            chatbot_output = gr.Chatbot(scale=1, elem_id="chatbot", type="messages", height="100%")
            user_input = gr.Textbox(scale=0, show_label=False, placeholder="Enter your message...")
            user_input.submit(chatbot_response, user_input, chatbot_output)

逻辑说明 #

• fill_height=True会让容器（Row/Column）自动填充父容器的可用垂直空间
• height="100%"让Chatbot占满所在Column的高度，Column会自动分配空间：TextBox固定高度，剩余空间全部给Chatbot
• 当浏览器窗口大小变化时，Row和Column会自动调整高度，Chatbot也会同步缩放

内容的提问来源于stack exchange，提问作者Andrew Anokhin