布局使用指南

Ratatui Kit 提供了统一且灵活的终端 UI 布局能力,其核心在于 LayoutStyle。通过合理配置 LayoutStyle,可以高效描述和控制组件的排列方式、对齐、间距等常见布局需求。

LayoutStyle 概述

LayoutStyle 是 Ratatui Kit 各类支持布局组件(如 ViewBorderScrollView 等)通用的布局描述结构。开发者可在 Props 中直接设置相关字段,底层布局引擎将自动完成排布。

主要属性说明

  • 主轴方向(flex_direction:决定子元素排列方向。
    • Direction::Horizontal:水平排列(默认)
    • Direction::Vertical:垂直排列
  • 主轴对齐(justify_content:控制子元素在主轴上的分布。
    • Flex::Start:起始对齐
    • Flex::End:末尾对齐
    • Flex::Center:居中
    • Flex::SpaceBetween:两端对齐,元素间均分
    • Flex::SpaceAround:元素周围均分,首尾有间隙
    • Flex::SpaceEvenly:所有间隔均等
  • 间距(gap:设置子元素间的空隙,单位为字符宽/高。
  • 外边距(margin:控制组件与外部的距离。
  • 偏移量(offset:微调组件位置。
  • 尺寸(width / height:支持固定值、百分比等方式约束宽高。

支持 LayoutStyle 的组件

只要组件的 Props 结构体包含上述布局字段,即具备完整布局能力。常见支持组件包括:

  • Border
  • View
  • ScrollView

布局示例

以下为垂直居中布局的典型用法,摘自 examples/counter.rs

element!(
    Border(
        flex_direction: Direction::Vertical,
        justify_content: Flex::Center,
    ) {
        View(height: Constraint::Length(1)) {
            $Line::styled(
                format!("Counter: {state}"),
                Style::default().green().bold(),
            )
            .centered()
            .bold()
        }
    }
)

在该示例中,BorderView 的 Props 直接包含了布局相关字段,布局属性通过 Props 传递,底层由布局引擎统一处理。

通过合理使用 LayoutStyle,你可以灵活实现各种终端 UI 布局,满足不同场景的需求。建议优先熟悉各属性的作用,结合实际组件灵活配置。