GPUI布局与样式设计技能Skill gpui-layout-and-style

---

名称: gpui-布局与样式 描述: GPUI中的布局和样式。用于样式化组件、布局系统或类似CSS的属性。

概述

GPUI 提供具有Rust类型安全的CSS-like样式设置。

关键概念:

• 弹性盒子布局系统
• Styled trait用于链式样式设置
• 尺寸单位: px(), rems(), relative()
• 颜色、边框、阴影

快速入门

基础样式设置

use gpui::*;

div()
    .w(px(200.))
    .h(px(100.))
    .bg(rgb(0x2196F3))
    .text_color(rgb(0xFFFFFF))
    .rounded(px(8.))
    .p(px(16.))
    .child("样式化内容")

弹性盒子布局

div()
    .flex()
    .flex_row()  // 或 flex_col() 用于列
    .gap(px(8.))
    .items_center()
    .justify_between()
    .children([
        div().child("项目 1"),
        div().child("项目 2"),
        div().child("项目 3"),
    ])

尺寸单位

div()
    .w(px(200.))           // 像素
    .h(rems(10.))          // 相对于字体大小
    .w(relative(0.5))      // 父级宽度的50%
    .min_w(px(100.))
    .max_w(px(400.))

常见模式

居中内容

div()
    .flex()
    .items_center()
    .justify_center()
    .size_full()
    .child("居中")

卡片布局

div()
    .w(px(300.))
    .bg(cx.theme().surface)
    .rounded(px(8.))
    .shadow_md()
    .p(px(16.))
    .gap(px(12.))
    .flex()
    .flex_col()
    .child(heading())
    .child(content())

响应式间距

div()
    .p(px(16.))           // 所有边的内边距
    .px(px(20.))          // 水平内边距
    .py(px(12.))          // 垂直内边距
    .pt(px(8.))           // 顶部内边距
    .gap(px(8.))          // 子元素之间的间隙

样式方法

尺寸

.w(px(200.))              // 宽度
.h(px(100.))              // 高度
.size(px(200.))           // 宽度和高度
.min_w(px(100.))          // 最小宽度
.max_w(px(400.))          // 最大宽度

颜色

.bg(rgb(0x2196F3))        // 背景
.text_color(rgb(0xFFFFFF)) // 文本颜色
.border_color(rgb(0x000000)) // 边框颜色

边框

.border(px(1.))           // 边框宽度
.rounded(px(8.))          // 边框半径
.rounded_t(px(8.))        // 顶部圆角
.border_color(rgb(0x000000))

间距

.p(px(16.))               // 内边距
.m(px(8.))                // 外边距
.gap(px(8.))              // 弹性子元素之间的间隙

弹性盒子

.flex()                   // 启用弹性盒子
.flex_row()               // 行方向
.flex_col()               // 列方向
.items_center()           // 对齐项目居中
.justify_between()        // 项目之间空间分布
.flex_grow()              // 增长以填充空间

主题集成

div()
    .bg(cx.theme().surface)
    .text_color(cx.theme().foreground)
    .border_color(cx.theme().border)
    .when(is_hovered, |el| {
        el.bg(cx.theme().hover)
    })

条件样式设置

div()
    .when(is_active, |el| {
        el.bg(cx.theme().primary)
    })
    .when_some(optional_color, |el, color| {
        el.bg(color)
    })

参考文档

• 完整指南: 参见 reference.md
  • 所有样式方法
  • 布局策略
  • 主题化、响应式设计