自定义Awesome WM组件中wibox.layout.ratio.vertical子元素不显示问题

在基于Awesome WM创建自定义任务列表时，使用wibox.layout.ratio.vertical布局的inner_layout无法显示内部的clienticon和textbox组件，仅显示背景形状，但直接使用awful.widget.clienticon(c)时可正常显示。

关键错误分析 #

1. 未定义变量引用
   设置布局比例时，错误引用了不存在的my_client_icon和my_small_shape变量，实际定义的变量是a_client_icon和a_small_shape，导致比例设置失败，布局无法渲染子组件。

2. 比例未正确应用
   wibox.layout.ratio.vertical需要调用adjust_ratio方法确认比例设置，仅使用set_widget_ratio不会自动生效。

修复后的核心代码片段 #

修正后的inner_layout部分 #

local inner_layout = wibox.widget {
    a_client_icon,
    a_small_shape,
    layout = wibox.layout.ratio.vertical,
}

-- 修正变量名并应用比例
inner_layout:set_widget_ratio(a_client_icon, 0.8)
inner_layout:set_widget_ratio(a_small_shape, 0.2)
inner_layout:adjust_ratio(1, 0.8, 0.2) -- 垂直布局轴索引为1，确认比例生效

完整修复后的create_client_widget函数 #

local function create_client_widget(c)
    print("icon_name: " , c.icon_name)
    print("class: " , c.class)
    -- Create the icon widget
    local a_client_icon = wibox.widget{ 
        widget = awful.widget.clienticon(c), 
    }
    local a_small_shape = wibox.widget{
        {
            text = "●", -- 添加默认文本，方便确认组件显示状态
            widget = wibox.widget.textbox,
        },
        shape = gears.shape.circle,
        bg = "#FF0000",
        widget = wibox.container.background,
    }
    local inner_layout = wibox.widget {
        a_client_icon,
        a_small_shape,
        layout = wibox.layout.ratio.vertical,
    }
    
    -- 修正变量引用并应用比例
    inner_layout:set_widget_ratio(a_client_icon, 0.8)
    inner_layout:set_widget_ratio(a_small_shape, 0.2)
    inner_layout:adjust_ratio(1, 0.8, 0.2)

    local icon = wibox.widget {
        {
            {
                {
                   widget = inner_layout,
                },
                forced_width = 40,
                forced_height = 40,
                margins = 4,
                widget = wibox.container.margin,
            },
            shape = gears.shape.circle,
            bg = "#FF0000",
            widget = wibox.container.background,
        },
        margins = 1,
        widget = wibox.container.margin,
    }

    local outer_bg = icon.children[1]
    
    -- Add mouse events to the icon
    icon:buttons(gears.table.join(
        awful.button({}, 1, function()
            c:emit_signal("request::activate", "tasklist", {raise = true})
        end),
        awful.button({}, 3, function()
            print("Right-click detected on client: " .. c.name)
            awful.menu({
                items = {
                    { "Open Terminal", terminal },
                    { "Restart", awesome.restart },
                    { "Quit", awesome.quit }
                }
            }):show()
        end)
    ))

    icon:connect_signal("mouse::enter", function()
        outer_bg.bg = "#00FF00"
    end)

    icon:connect_signal("mouse::leave", function()
        outer_bg.bg = "#FF0000"
    end)

    return icon
end

额外优化建议 #

• 给a_small_shape的textbox添加默认文本，方便直观确认组件是否正常显示
• 可以给a_client_icon设置forced_width/height，避免图标尺寸异常导致的显示问题

内容的提问来源于Stack Exchange，提问作者New developer