Back to Details

gpui-layout-and-style

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Overview

概述

GPUI provides CSS-like styling with Rust type safety.
Key Concepts:
  • Flexbox layout system
  • Styled trait for chaining styles
  • Size units: 
    px()
    , 
    rems()
    , 
    relative()
  • Colors, borders, shadows
GPUI 提供具备Rust类型安全性的类CSS样式系统。
核心概念：
  • Flexbox布局系统
  • 用于链式调用样式的Styled trait
  • 尺寸单位：
    px()
    、
    rems()
    、
    relative()
  • 颜色、边框、阴影

Quick Start

快速入门

Basic Styling

基础样式设置

rust
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")
rust
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 Layout

Flexbox布局

rust
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"),
    ])
rust
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"),
    ])

Size Units

尺寸单位

rust
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.))
rust
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.))

Common Patterns

常见模式

Centered Content

居中内容

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

Card Layout

卡片布局

rust
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())
rust
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())

Responsive Spacing

响应式间距

rust
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
rust
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

Styling Methods

样式设置方法

Dimensions

尺寸

rust
.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
rust
.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

Colors

颜色

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

Borders

边框

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

Spacing

间距

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

Flexbox

Flexbox

rust
.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
rust
.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

Theme Integration

主题集成

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

Conditional Styling

条件式样式设置

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

Reference Documentation

参考文档

  • Complete Guide: See reference.md
    • All styling methods
    • Layout strategies
    • Theming, responsive design
  • 完整指南: 查看 reference.md
    • 所有样式设置方法
    • 布局策略
    • 主题、响应式设计