스타일 기본사항

앱 전체에서 스타일을 채택하는 방법은 세 가지가 있습니다.

Style 매개변수를 노출하는 기존 구성요소에 직접 사용합니다.
Style 매개변수를 허용하지 않는 레이아웃 컴포저블에 Modifier.styleable를 사용하여 스타일을 적용합니다.
자체 맞춤 디자인 시스템에서 Modifier.styleable{}를 사용하고 자체 구성요소에 스타일 매개변수를 노출합니다.

스타일에서 사용 가능한 속성

스타일은 수정자가 지원하는 속성을 대부분 지원하지만 수정자인 모든 항목을 스타일로 복제할 수 있는 것은 아닙니다. 상호작용, 맞춤 그리기 또는 속성 스태킹과 같은 특정 동작에는 여전히 수정자가 필요합니다.

그룹화	속성	자녀가 상속함
레이아웃 및 크기 조정
패딩	`contentPadding` (내부) 및 `externalPadding` (외부) 방향, 가로, 세로, 모든 방향 변형으로 제공됩니다.	아니요
크기	`fillWidth/Height/Size()` 및 `width`, `height`, `size` (`Dp`, `DpSize` 또는 `Float` 분수 지원)	아니요
포지셔닝	`left/top/right/bottom` 오프셋을 사용합니다.	아니요
시각적 디자인
채워짐	`background` 및 `foreground` (`Color` 또는 `Brush` 지원)	아니요
테두리	`borderWidth`, `borderColor`, `borderBrush`	아니요
도형	`shape`	아니요. 다른 속성과 함께 사용됩니다. `clip` 및 `border`은 정의된 이 모양을 사용합니다.
그림자	`dropShadow`, `innerShadow`	아니요
변환
그래픽 레이어 공간 이동	`translationX`, `translationY`, `scaleX/Y`, `rotationX/Y/Z`	아니요
컨트롤	`alpha`, `zIndex` (스태킹 순서), `transformOrigin` (피벗 포인트)	아니요
서체
스타일	`textStyle`, `fontSize`, `fontWeight`, `fontStyle`, `fontFamily`	예
색상	`contentColor` 및 `contentBrush`. 아이콘 스타일 지정에도 사용됩니다.	예
단락	`lineHeight`, `letterSpacing`, `textAlign`, `textDirection`, `lineBreak`, `hyphens`	예
장식	`textDecoration`, `textIndent`, `baselineShift`	예

스타일 매개변수가 있는 구성요소에 스타일 직접 사용

Style 매개변수를 노출하는 구성요소를 사용하면 스타일을 설정할 수 있습니다.

BaseButton(
    onClick = { },
    style = { }
) {
    BaseText("Click me")
}StylesSnippets.kt

스타일 람다 내에서 externalPadding 또는 background과 같은 다양한 속성을 설정할 수 있습니다.

BaseButton(
    onClick = { },
    style = { background(Color.Blue) }
) {
    BaseText("Click me")
}StylesSnippets.kt

지원되는 속성의 전체 목록은 스타일에서 사용 가능한 속성을 참고하세요.

기존 매개변수가 없는 구성요소의 수정자를 사용하여 스타일 적용

내장 스타일 매개변수가 없는 구성요소의 경우 styleable 수정자를 사용하여 스타일을 적용할 수 있습니다. 이 접근 방식은 자체 맞춤 구성요소를 개발할 때도 유용합니다.

Row(
    modifier = Modifier.styleable { }
) {
    BaseText("Content")
}StylesSnippets.kt

style 매개변수와 마찬가지로 람다 내에 background 또는 padding과 같은 속성을 포함할 수 있습니다.

Row(
    modifier = Modifier.styleable {
        background(Color.Blue)
    }
) {
    BaseText("Content")
}StylesSnippets.kt

체이닝된 여러 Modifier.styleable 수정자는 적용된 컴포저블의 상속되지 않은 속성과 함께 추가되어 동일한 속성을 정의하는 여러 수정자와 유사하게 동작합니다. 상속된 속성의 경우 이러한 속성은 재정의되며 체인의 마지막 styleable 수정자가 값을 설정합니다.

Modifier.styleable를 사용할 때는 상태 기반 스타일을 적용하기 위해 수정자와 함께 사용할 StyleState를 만들어 제공할 수도 있습니다. 자세한 내용은 스타일을 사용한 상태 및 애니메이션을 참고하세요.

독립형 스타일 정의

재사용성을 위해 독립형 스타일을 정의할 수 있습니다.

val style = Style { background(Color.Blue) }StylesSnippets.kt

그런 다음 정의된 스타일을 컴포저블의 스타일 매개변수 또는 Modifier.styleable와 함께 전달할 수 있습니다. Modifier.styleable를 사용하는 경우 StyleState 객체도 만들어야 합니다. StyleState는 스타일을 사용한 상태 및 애니메이션 문서에 자세히 설명되어 있습니다.

다음 예에서는 구성요소의 기본 제공 매개변수를 통해 또는 Modifier.styleable를 통해 스타일을 직접 적용하는 방법을 보여줍니다.

val style = Style { background(Color.Blue) }

// built in parameter
BaseButton(onClick = { }, style = style) {
    BaseText("Button")
}

// modifier styleable
val styleState = remember { MutableStyleState(null) }
Column(
    Modifier.styleable(styleState, style)
) {
    BaseText("Column content")
}StylesSnippets.kt

이 스타일을 여러 구성요소에 전달할 수도 있습니다.

val style = Style { background(Color.Blue) }

// built in parameter
BaseButton(onClick = { }, style = style) {
    BaseText("Button")
}
BaseText("Different text that uses the same style parameter", style = style)

// modifier styleable
val columnStyleState = remember { MutableStyleState(null) }
Column(
    Modifier.styleable(columnStyleState, style)
) {
    BaseText("Column")
}
val rowStyleState = remember { MutableStyleState(null) }
Row(
    Modifier.styleable(rowStyleState, style)
) {
    BaseText("Row")
}StylesSnippets.kt

여러 스타일 속성 추가

각 줄에 다른 속성을 설정하여 여러 스타일 속성을 추가할 수 있습니다.

BaseButton(
    onClick = { },
    style = {
        background(Color.Blue)
        contentPaddingStart(16.dp)
    }
) {
    BaseText("Button")
}StylesSnippets.kt

스타일의 속성은 수정자 기반 스타일과 달리 누적되지 않습니다. 스타일은 하나의 스타일 블록 내 속성 목록에서 마지막으로 설정된 값을 사용합니다. 다음 예시에서 배경이 두 번 설정되면 TealColor이 적용된 배경입니다. 패딩의 경우 contentPaddingTop가 contentPadding에 의해 설정된 상단 패딩을 재정의하며 값을 결합하지 않습니다.

BaseButton(
    style = {
        background(Color.Red)
        // Background of Red is now overridden with TealColor instead
        background(TealColor)
        // All directions of padding are set to 64.dp (top, start, end, bottom)
        contentPadding(64.dp)
        // Top padding is now set to 16.dp, all other paddings remain at 64.dp
        contentPaddingTop(16.dp)
    },
    onClick = {
        //
    }
) {
    BaseText("Click me!")
}StylesSnippets.kt

여러 스타일 객체 병합

여러 스타일 객체를 만들어 컴포저블의 스타일 매개변수에 전달할 수 있습니다.

val style1 = Style { background(TealColor) }
val style2 = Style { contentPaddingTop(16.dp) }

BaseButton(
    style = style1 then style2,
    onClick = {

    },
) {
    BaseText("Click me!")
}StylesSnippets.kt

여러 스타일에서 동일한 속성을 지정하는 경우 마지막으로 설정된 속성이 선택됩니다. 속성은 스타일에서 추가되지 않으므로 마지막으로 전달된 패딩이 초기 contentPadding에 의해 설정된 contentPaddingHorizontal을 재정의합니다. 또한 마지막 배경 색상은 전달된 초기 스타일로 설정된 배경 색상을 재정의합니다.

val style1 = Style {
    background(Color.Red)
    contentPadding(32.dp)
}

val style2 = Style {
    contentPaddingHorizontal(8.dp)
    background(Color.LightGray)
}

BaseButton(
    style = style1 then style2,
    onClick = {

    },
) {
    BaseText("Click me!")
}StylesSnippets.kt

이 경우 적용된 스타일에는 밝은 회색 배경과 32.dp 패딩이 있습니다. 단, 왼쪽 및 오른쪽 패딩에는 8.dp 값이 있습니다.

스타일 상속

contentColor 및 텍스트 스타일 관련 속성과 같은 특정 스타일 속성은 하위 컴포저블로 전파됩니다. 하위 컴포저블에 설정된 스타일은 해당 하위 항목에 상속된 상위 스타일을 재정의합니다.

스타일, 스타일 지정 가능, 직접 매개변수를 사용한 스타일 전파 — **그림 4.** `Style`, `styleable`, 직접 매개변수를 사용한 스타일 전파

우선순위	메서드	결과
1 (가장 높음)	컴포저블의 직접 인수	모든 것을 재정의합니다(예: `Text(color = Color.Red)`).
2	스타일 매개변수	로컬 스타일 재정의 `Text(style = Style { contentColor(Color.Red)}`
3	수정자 체인	`Modifier.styleable{ contentColor(Color.Red)`를 사용합니다.
4 (가장 낮음)	상위 스타일	상위 요소에서 전달되어 상속될 수 있는 속성 (서체/색상)

상위 스타일

상위 컴포저블에서 텍스트 속성 (예: contentColor)을 설정하면 모든 하위 Text 컴포저블에 전파됩니다.

val styleState = remember { MutableStyleState(null) }
Column(
    modifier = Modifier.styleable(styleState) {
        background(Color.LightGray)
        val blue = Color(0xFF4285F4)
        val purple = Color(0xFFA250EA)
        val colors = listOf(blue, purple)
        contentBrush(Brush.linearGradient(colors))
    },
) {
    BaseText("Children inherit", style = { width(60.dp) })
    BaseText("certain properties")
    BaseText("from their parents")
}StylesSnippets.kt

속성의 하위 재정의

특정 Text 컴포저블에 스타일을 설정할 수도 있습니다. 상위 컴포저블에 스타일이 설정되어 있으면 하위 컴포저블에 설정된 스타일이 상위 컴포저블의 스타일을 재정의합니다.

val styleState = remember { MutableStyleState(null) }
Column(
    modifier = Modifier.styleable(styleState) {
        background(Color.LightGray)
        val blue = Color(0xFF4285F4)
        val purple = Color(0xFFA250EA)
        val colors = listOf(blue, purple)
        contentBrush(Brush.linearGradient(colors))
    },
) {
    BaseText("Children can ", style = {
        contentBrush(Brush.linearGradient(listOf(Color.Red, Color.Blue)))
    })
    BaseText("override properties")
    BaseText("set by their parents")
}StylesSnippets.kt

하위 컴포저블이 상위 속성을 재정의함 — **그림 6.** 하위 컴포저블은 상위 속성을 재정의합니다.

맞춤 스타일 속성 구현

다음 예와 같이 StyleScope에서 확장 함수를 사용하여 기존 스타일 정의에 매핑되는 맞춤 속성을 만들 수 있습니다.

fun StyleScope.outlinedBackground(color: Color) {
    border(1.dp, color)
    background(color)
}StylesSnippets.kt

스타일 정의 내에서 이 새 속성을 적용합니다.

val customExtensionStyle = Style {
    outlinedBackground(Color.Blue)
}StylesSnippets.kt

스타일 지정 가능한 새 속성을 만드는 것은 지원되지 않습니다. 사용 사례에 이러한 지원이 필요한 경우 기능 요청을 제출하세요.

`CompositionLocal` 값 읽기

CompositionLocal 내에 디자인 시스템 토큰을 저장하여 변수를 매개변수로 전달하지 않고도 액세스하는 것이 일반적인 패턴입니다. 스타일은 CompositionLocal에 액세스하여 스타일 내에서 시스템 전체 값을 가져올 수 있습니다.

val buttonStyle = Style {
    contentPadding(12.dp)
    shape(RoundedCornerShape(50))
    background(Brush.verticalGradient(LocalCustomColors.currentValue.background))
}StylesSnippets.kt