CapDrive
User guide

HStack

Arrange the subtitles View from left to right, suitable for horizontal combinations of icons and numbers, numbers and units, etc. spacing sets the adjacent spacing, alignment sets the top and bottom or text baseline alignment within this line.

Example

function main() {
  return (
    <HStack spacing={12} alignment="center">
      <Symbol name="speedometer" />
      <Text fontSize={32}>78</Text>
    </HStack>
  );
}

Usage

  • alignment controls vertical or text-baseline alignment within the row, not the row’s horizontal position. Put Spacer between items to push them apart. firstTextBaseline aligns a large number with a smaller unit.
  • Numeric sizes use points. auto measures content; fill uses the space allocated by the parent. Size the container before tuning children. fill creates no extra space, and long text cannot enlarge a fixed parent.
  • Layout reserves space before x/y and transform are applied. Moving a child right by 20 points does not push its siblings away; use spacing or Spacer to change gaps. Rotation and scaling affect the completed View.

Properties

children?ViewContent

Child drawing content.

spacing?number

Space between children in points.

Example8
alignment?"top" | "center" | "bottom" | "firstTextBaseline" | "lastTextBaseline"

Vertical alignment within the row: top, center, bottom or first/last text baseline.

Example"center"
Common properties
width?number | "auto" | "fill"

Width in points, auto sizing or parent fill.

Example100
height?number | "auto" | "fill"

Height in points, auto sizing or parent fill.

Example80
padding?number

Content padding in points.

Example0
x?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0
y?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0
transform?ViewTransform

Transform the whole View without changing layout. Translation uses points; rotation/skew use degrees; scale 1 is unchanged; anchors use 0–1.

Example{rotation: 0}
background?Paint

Background paint; accepts a color or gradient. Use clear for transparency.

Example"clear"
opacity?number

Opacity of the whole View: 0 is transparent, 1 is opaque.

Example1
cornerRadius?number

Corner radius in points.

Example0
clipped?boolean

Clip drawing that extends beyond the View bounds.

Examplefalse
clip?"rectangle" | "ellipse"

Clipping shape: rectangle or ellipse. Material also accepts false to disable clipping.

Example"rectangle"
mask?View | null

Alpha mask View. Centered without affecting layout; null disables masking.

Example<Circle width="fill" height="fill" background="white"/>
zIndex?number

Drawing order among siblings; larger values appear in front.

Example0
blur?number

Blur radius in points; 0 disables blur.

Example4
innerShadow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Color of the outer shadow.

ExampleHDR("black")
shadowOpacity?number

Outer shadow opacity from 0 to 1; 0 hides it.

Example0
shadowRadius?number

Outer shadow blur radius in points.

Example4
shadowX?number

Outer shadow offset in points: x right, y down.

Example0
shadowY?number

Outer shadow offset in points: x right, y down.

Example2
animations?Animation[]

Animate a supported property when it changes. duration/delay use seconds; from/to set endpoints; repeat and autoreverse control repetition; wrap sets a periodic range.

Example[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Stable identity among siblings.

Practical example

function main() {
  return (
    <HStack width={260} alignment="firstTextBaseline" spacing={4}>
      <Text fontSize={48}>78</Text>
      <Text fontSize={14}>km/h</Text>
      <Spacer minLength={12} />
      <Symbol name="speedometer" fontSize={24} />
    </HStack>
  );
}

Animation

Animation

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYspacingtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

When omitted

The table lists omission behavior verified against implementation. Property examples are copyable syntax, not defaults. Pass explicit values for a fixed result; contextual dimensions and theme colors are not fixed constants.

PropertiesWhen omitted
spacing8
alignment"center"

Spacer

VStack

VStack

Previous

ZStack

Next step

On this page

ExampleUsagePropertiesPractical exampleAnimationWhen omittedRelated APIs