[Compose] 하철이 - 가로 스크롤 아이템

Compose 스터디를 위해서 기존 개발된 "하철이"앱을 compose 로 바꿔보는 중입니다.

1. 기본 텍스트 상단

Text(
    text = "실시간 하철이",
    fontSize = 25.sp,
    textAlign = TextAlign.Center,
    modifier = Modifier
        .align(Alignment.CenterHorizontally)
        .padding(top = 35.dp)
        .fillMaxWidth()
)

2. 가로 스크롤 Row

LazyRow(
    modifier = Modifier.fillMaxWidth().padding(5.dp),
    state = rememberLazyListState()
) {
    items(subwayLines) { subway ->
        stationLinesItem(subway)
    }
}

3. 상세 아이템

@Composable
fun stationLinesItem(subway: Subway) {
    Card(modifier = Modifier.padding(3.dp),shape = RoundedCornerShape(50),
    ) {
        Surface(color = Color(subway.color)) {
            Text(subway.label, fontSize = 12.sp, modifier = Modifier.padding(top = 4.dp, bottom = 4.dp, start = 8.dp, end = 8.dp)
            , color = Color.White)
        }
    }
}

 

결과

---

아직 데이터 연동과 화면그리기에 대한 개념이 잡히지 않아서 복잡한 화면을 그리기에는 문제가 있습니다.

좀더 다양하게 테스트 해보고 숙달할 예정입니다.