CapDrive
User guide

VStack

Arrange the subtitles View from top to bottom, suitable for the vertical combination of titles, main numbers and units. spacing sets the adjacent spacing, and alignment sets the left and right alignment within this column.

Example

function main() {
  return (
    <VStack spacing={8} alignment="leading">
      <Text fontSize={32}>78</Text>
      <Text>km/h</Text>
    </VStack>
  );
}

Usage

  • alignment controls horizontal alignment within the column: leading starts at the left, trailing at the right. Use Spacer for flexible vertical space. spacing applies only between adjacent children.
  • 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?"leading" | "center" | "trailing"

Horizontal alignment within the column: leading, center or trailing.

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 (
    <VStack width={180} height={140} alignment="leading" spacing={8}>
      <Text fontSize={14}>Speed</Text>
      <Spacer minLength={8} />
      <Text fontSize={48}>78</Text>
      <Text fontSize={14}>km/h</Text>
    </VStack>
  );
}

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

HStack

Spacer

Previous

HStack

Next step

On this page

ExampleUsagePropertiesPractical exampleAnimationWhen omittedRelated APIs