gpui-layout-and-style

用途

该技能用于在 GPUI 中进行布局与样式编写。当需要为组件设置样式、搭建布局系统，或使用类 CSS 属性时，可参考此技能。GPUI 提供带 Rust 类型安全的类 CSS 样式系统。

主要能力与核心概念

• Flexbox 布局系统
• 用于链式书写样式的 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("Styled content")

Flexbox 布局

div()
    .flex()
    .flex_row()  // or flex_col() for column
    .gap(px(8.))
    .items_center()
    .justify_between()
    .children([
        div().child("Item 1"),
        div().child("Item 2"),
        div().child("Item 3"),
    ])

尺寸单位

div()
    .w(px(200.))           // Pixels
    .h(rems(10.))          // Relative to font size
    .w(relative(0.5))      // 50% of parent
    .min_w(px(100.))
    .max_w(px(400.))

常见模式

居中内容：

div()
    .flex()
    .items_center()
    .justify_center()
    .size_full()
    .child("Centered")

卡片布局：

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.))           // Padding all sides
    .px(px(20.))          // Padding horizontal
    .py(px(12.))          // Padding vertical
    .pt(px(8.))           // Padding top
    .gap(px(8.))          // Gap between children

样式方法

尺寸：

.w(px(200.))              // Width
.h(px(100.))              // Height
.size(px(200.))           // Width and height
.min_w(px(100.))          // Min width
.max_w(px(400.))          // Max width

颜色：

.bg(rgb(0x2196F3))        // Background
.text_color(rgb(0xFFFFFF)) // Text color
.border_color(rgb(0x000000)) // Border color

边框：

.border(px(1.))           // Border width
.rounded(px(8.))          // Border radius
.rounded_t(px(8.))        // Top corners
.border_color(rgb(0x000000))

间距：

.p(px(16.))               // Padding
.m(px(8.))                // Margin
.gap(px(8.))              // Gap between flex children

Flexbox：

.flex()                   // Enable flexbox
.flex_row()               // Row direction
.flex_col()               // Column direction
.items_center()           // Align items center
.justify_between()        // Space between items
.flex_grow()              // Grow to fill space

主题集成

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。其中涵盖所有样式方法、布局策略，以及主题、响应式设计等内容。

适用场景与限制

适用于使用 GPUI 构建界面的 Rust 项目，特别是需要组件样式、Flexbox 布局、主题色与条件样式的场景。该技能依赖 GPUI 框架及其 Styled trait。除上述资料内容外，更多平台、收费、价格或效果信息暂未提供。