如何在Python Textual中居中Input组件？align_horizontal方法无效

问题场景 #

在使用Python Textual框架开发登录页面时，尝试为Input组件设置styles.align_horizontal = "center"并限制max_width = 25，期望实现输入字段居中，但输入字段仍保持左对齐。

原代码示例 #

from textual.app import App, ComposeResult
from textual.widgets import Header, Input

class LoginPage(App):
   AUTO_FOCUS = "Input#user"

   userX = ""
   loginOk = False
   user_widget = Input()
   pass_widget = Input() 

   def compose(self) -> ComposeResult:
      yield Header()
      self.user_widget = Input(placeholder="Username",id="user")
      self.pass_widget = Input(placeholder="Password", password=True, id="password") 

      self.user_widget.styles.align_horizontal = "center"
      self.user_widget.styles.max_width = 25
      self.pass_widget.styles.max_width = 25
      self.pass_widget.styles.align_horizontal = "center"
      yield self.user_widget
      yield self.pass_widget 

   def on_input_submitted(self, event: Input.Submitted) -> None:
        if event.input.id == "user":
          self.userX = event.input.value
          self.pass_widget.focus()
        else:
          pswd = event.input.value

app = LoginPage()
if __name__ == "__main__":
    app.run()

问题原因 #

Textual中，align_horizontal属性控制的是组件内部内容的对齐方式（比如输入框里的文本），而非组件自身在父容器中的位置。原代码的设置只会让输入框内的文本居中，但Input组件本身在父容器里还是左对齐状态。

解决方案 #

要让Input组件整体在页面水平居中，需要给它的父容器设置水平对齐样式，推荐用Container组件包裹Input，这样可以灵活控制局部布局：

修改后的代码

from textual.app import App, ComposeResult
from textual.widgets import Header, Input, Container  # 导入Container组件

class LoginPage(App):
    AUTO_FOCUS = "Input#user"

    userX = ""
    loginOk = False

    def compose(self) -> ComposeResult:
        yield Header()
        # 用Container包裹输入框，设置容器水平居中
        with Container(styles={"align_horizontal": "center"}):
            user_widget = Input(placeholder="Username", id="user", styles={"max_width": 25})
            pass_widget = Input(placeholder="Password", password=True, id="password", styles={"max_width": 25})
            yield user_widget
            yield pass_widget

    def on_input_submitted(self, event: Input.Submitted) -> None:
        if event.input.id == "user":
            self.userX = event.input.value
            self.query_one("#password", Input).focus()
        else:
            pswd = event.input.value

app = LoginPage()
if __name__ == "__main__":
    app.run()

另一种全局设置方式

如果希望页面内所有组件都居中，也可以通过CSS样式直接设置根容器：

from textual.app import App, ComposeResult
from textual.widgets import Header, Input

class LoginPage(App):
    AUTO_FOCUS = "Input#user"
    # 添加全局CSS
    CSS = """
    Screen {
        align-horizontal: center;
    }
    Input {
        max-width: 25;
    }
    """

    userX = ""
    loginOk = False

    def compose(self) -> ComposeResult:
        yield Header()
        yield Input(placeholder="Username", id="user")
        yield Input(placeholder="Password", password=True, id="password")

    def on_input_submitted(self, event: Input.Submitted) -> None:
        if event.input.id == "user":
            self.userX = event.input.value
            self.query_one("#password", Input).focus()
        else:
            pswd = event.input.value

app = LoginPage()
if __name__ == "__main__":
    app.run()

效果说明 #

两种方式都能让Input组件以25列的宽度在页面水平居中显示，同时输入框内的文本默认左对齐（如果需要文本居中，再单独给Input设置align_horizontal = "center"即可）。

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