Kivy：如何将BoxLayout对齐到另一个BoxLayout的右上方

我想把一个BoxLayout对齐到另一个BoxLayout的右上方，但现在它只能显示在第一个BoxLayout的下方。

当前效果：

目标效果：

我查过类似问题，知道可以用pos_hint实现，但试了多种组合都没成功。我的当前KV代码如下：

<DashboardScreen>:
    BoxLayout:
        orientation: "vertical"
        canvas:
            Color:
                rgba: utils.get_color_from_hex("#0b172e")
            Rectangle:
                size: self.size
                pos: self.pos
        Spacer:
            size_hint: (1, 0.04)
        
        BoxLayout:
            orientation: "vertical"
            size_hint: (0.98,  0.90)
            pos_hint: {"right": 0.99}
            
            BoxLayout:
                orientation: "horizontal"
                size_hint: (0.03, 0.9)
                canvas:
                    Color:
                        rgba: utils.get_color_from_hex("#1b203e")
                    RoundedRectangle:
                        size: self.size
                        pos: self.pos
                Spacer:
                    size_hint: (0.3, 1)
            
            BoxLayout:
                orientation: "horizontal"
                size_hint: (0.8, 0.35)
                pos_hint: {"right": 0.99}
                pos_hint: {"top": 0.99}
                spacing: "5"
                canvas:
                    Color:
                        rgba: utils.get_color_from_hex("#1b203e")
                    RoundedRectangle:
                        size: self.size
                        pos: self.pos

解决方法 #

问题核心是你用了垂直方向的BoxLayout作为两个目标容器的父布局——垂直BoxLayout会强制子元素按从上到下的顺序排列，所以第二个BoxLayout必然出现在第一个下方。要实现右上方对齐，需要调整父布局的类型，同时修正pos_hint的写法：

修正后的KV代码

<DashboardScreen>:
    BoxLayout:
        orientation: "vertical"
        canvas:
            Color:
                rgba: utils.get_color_from_hex("#0b172e")
            Rectangle:
                size: self.size
                pos: self.pos
        Spacer:
            size_hint: (1, 0.04)
        
        # 把垂直BoxLayout改为水平方向，允许子元素横向排列
        BoxLayout:
            orientation: "horizontal"
            size_hint: (0.98, 0.90)
            pos_hint: {"right": 0.99}
            
            BoxLayout:
                orientation: "horizontal"
                size_hint: (0.03, 0.9)
                canvas:
                    Color:
                        rgba: utils.get_color_from_hex("#1b203e")
                    RoundedRectangle:
                        size: self.size
                        pos: self.pos
                Spacer:
                    size_hint: (0.3, 1)
            
            # 用Spacer占据中间空间，把右侧BoxLayout推到最右边
            Spacer:
                size_hint: (1, 1)
            
            BoxLayout:
                orientation: "horizontal"
                size_hint: (0.8, 0.35)
                # 合并pos_hint属性，避免覆盖
                pos_hint: {"right": 1, "top": 1}
                spacing: "5"
                canvas:
                    Color:
                        rgba: utils.get_color_from_hex("#1b203e")
                    RoundedRectangle:
                        size: self.size
                        pos: self.pos

关键修改点

1. 父布局方向调整：将包裹两个目标BoxLayout的容器从垂直改为水平，打破垂直排列的限制。
2. 添加占位Spacer：通过Spacer占据中间剩余空间，让右侧BoxLayout自动靠右对齐。
3. 修正pos_hint写法：你之前分开写两个pos_hint会导致后写的覆盖前一个，正确写法是在一个pos_hint里同时设置right和top属性。

如果需要更灵活的定位，也可以将父容器换成FloatLayout，直接用pos_hint精确控制位置，但水平BoxLayout的方式更符合常规布局逻辑。

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