You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Python中如何单独设置文本对齐:原子序数左上、原子量左下

Kivy Element组件布局调整方案

要实现原子序数左上角、原子量左下角,同时符号和名称居中的效果,仅靠Button的text属性无法满足(因为它只能整体对齐),需要改用子布局嵌套多个Label的方式拆分各个文本元素,具体代码修改如下:

from kivy.uix.button import Button
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label

class Element(Button):
    def __init__(self, info, **kwargs):
        super(Element, self).__init__(**kwargs)
        self.info = info
        self.background_color = ELEMENT_COLOR_MAP[info["Element_Category"]]
        
        # 用FloatLayout作为容器,自由定位各文本元素
        layout = FloatLayout(size=self.size, pos=self.pos)
        self.add_widget(layout)
        
        # 原子序数:左上角
        atomic_num_label = Label(
            text=str(info['Atomic_Number']),
            size_hint=(None, None),
            size=(40, 20),
            pos_hint={'x': 0.05, 'top': 1},
            font_size=17
        )
        layout.add_widget(atomic_num_label)
        
        # 原子量:左下角
        atomic_weight_label = Label(
            text=str(info['Atomic_Weight']),
            size_hint=(None, None),
            size=(60, 20),
            pos_hint={'x': 0.05, 'y': 0},
            font_size=17
        )
        layout.add_widget(atomic_weight_label)
        
        # 符号和名称:垂直居中
        center_layout = BoxLayout(
            orientation='vertical',
            size_hint=(None, None),
            size=(100, 80),
            pos_hint={'center_x': 0.5, 'center_y': 0.5},
            spacing=5
        )
        # 元素符号
        symbol_label = Label(
            text=info['Symbol'],
            font_size=32,
            bold=True
        )
        # 元素名称
        name_label = Label(
            text=info['Name'],
            font_size=17
        )
        center_layout.add_widget(symbol_label)
        center_layout.add_widget(name_label)
        layout.add_widget(center_layout)
        
        # 绑定按钮尺寸变化,同步更新子布局大小
        self.bind(size=self.update_layout_size)
    
    def update_layout_size(self, instance, new_size):
        self.children[0].size = new_size

关键说明:

  • 放弃Button自带的text属性,改用FloatLayout作为容器,通过pos_hint精准控制每个文本的位置。
  • 原子序数、原子量用独立Label分别定位到左上角和左下角,预留5%边距避免贴边。
  • 符号和名称用垂直BoxLayout包裹,通过center_x和center_y实现整体居中。
  • 绑定按钮尺寸变化事件,确保子布局随按钮大小同步调整,避免布局错位。

内容的提问来源于stack exchange,提问作者Tom

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.24 19:52:13