[Compose] Row

Row란?

• 가로 배치

---

align 설정하기

• Row는 가로로 배치하고 있기 때문에 align은 세로로만 세팅이 가능하다
  

    Row(modifier = Modifier.height(200.dp)) {
        Text(text = "그래도", modifier = Modifier.align(Alignment.Top))
        Text(text = "해야지", modifier = Modifier.align(Alignment.CenterVertically))
        Text(text = "어떡해", modifier = Modifier.align(Alignment.Bottom))
    }

---

verticalAlignment 설정하기

• Text요소 전부 Alignment.Bottom으로 세팅하길 원할 경우 각 요소에 Alignment.Bottom을 세팅하는 게 아니라 verticalAlignment를 세팅해준다.
  

    Row(verticalAlignment = Alignment.Bottom,
        modifier = Modifier.height(40.dp)
    ) {
        Text(text = "그래도")
        Text(text = "해야지")
        Text(text = "어떡해")
    }

위 코드에서 부분적으로만 세팅해줄 수도 있다.
"그래도" text만 Top로 변경해보자.

    Row(verticalAlignment = Alignment.Bottom,
        modifier = Modifier.height(40.dp)
    ) {
        Text(text = "그래도", modifier = Modifier.align(Alignment.Top))
        Text(text = "해야지")
        Text(text = "어떡해")
    }

---

horizontalArrangement 설정하기

• Arrangement.Center
  

    Row(horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.Bottom,
        modifier = Modifier
            .height(40.dp)
            .width(200.dp)
    ) {
        Text(text = "그래도", modifier = Modifier.align(Alignment.Top))
        Text(text = "해야지")
        Text(text = "어떡해")
    }

• Arrangement.Start
  

    Row(horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.Bottom,
        modifier = Modifier
            .height(40.dp)
            .width(200.dp)
    ) {
        Text(text = "그래도", modifier = Modifier.align(Alignment.Top))
        Text(text = "해야지")
        Text(text = "어떡해")
    }

• Arrangement.End
  

    Row(horizontalArrangement = Arrangement.End,
        verticalAlignment = Alignment.Bottom,
        modifier = Modifier
            .height(40.dp)
            .width(200.dp)
    ) {
        Text(text = "그래도", modifier = Modifier.align(Alignment.Top))
        Text(text = "해야지")
        Text(text = "어떡해")
    }

• Arrangement.SpaceAround
  

    Row(horizontalArrangement = Arrangement.SpaceAround,
        verticalAlignment = Alignment.Bottom,
        modifier = Modifier
            .height(40.dp)
            .width(200.dp)
    ) {
        Text(text = "그래도", modifier = Modifier.align(Alignment.Top))
        Text(text = "해야지")
        Text(text = "어떡해")
    }

• Arrangement.SpaceBetween
  

    Row(horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.Bottom,
        modifier = Modifier
            .height(40.dp)
            .width(200.dp)
    ) {
        Text(text = "그래도", modifier = Modifier.align(Alignment.Top))
        Text(text = "해야지")
        Text(text = "어떡해")
    }

• Arrangement.SpaceEvenly
  

    Row(horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.Bottom,
        modifier = Modifier
            .height(40.dp)
            .width(200.dp)
    ) {
        Text(text = "그래도", modifier = Modifier.align(Alignment.Top))
        Text(text = "해야지")
        Text(text = "어떡해")
    }

---

weight 설정하기

• weight는 비중을 뜻한다.
  

    Row(
        verticalAlignment = Alignment.Bottom,
        modifier = Modifier
            .height(40.dp)
            .width(200.dp)
    ) {
        Text(text = "그래도", modifier = Modifier
            .align(Alignment.Top)
            .weight(3f))
        Text(text = "해야지", modifier = Modifier.weight(1f))
        Text(text = "어떡해", modifier = Modifier.weight(3f))
    }

---

Icon 넣기

    Row(
        verticalAlignment = Alignment.Bottom,
        modifier = Modifier
            .height(40.dp)
            .width(200.dp)
    ) {
        Text(text = "그래도", modifier = Modifier
            .align(Alignment.Top)
            .weight(3f))
        Icon(imageVector = Icons.Filled.Add,
            contentDescription = "추가")
        Text(text = "어떡해", modifier = Modifier.weight(3f))
    }

색상 추가하면

    Row(
        verticalAlignment = Alignment.Bottom,
        modifier = Modifier
            .height(40.dp)
            .width(200.dp)
    ) {
        Text(text = "그래도", modifier = Modifier
            .align(Alignment.Top)
            .weight(3f)
            .background(Color.Yellow))
        Icon(imageVector = Icons.Filled.Add,
            contentDescription = "추가",
            modifier = Modifier
                .weight(1f)
                .background(Color.Green))
        Text(text = "어떡해", modifier = Modifier
            .weight(3f)
            .background(Color.Blue))
    }

textAlign 설정하면

    Row(
        verticalAlignment = Alignment.Bottom,
        modifier = Modifier
            .height(40.dp)
            .width(200.dp)
    ) {
        Text(text = "그래도",
            textAlign = TextAlign.End,
            modifier = Modifier
                .align(Alignment.Top)
                .weight(3f)
                .background(Color.Yellow))
        Icon(imageVector = Icons.Filled.Add,
            contentDescription = "추가",
            modifier = Modifier
                .weight(1f)
                .background(Color.Green))
        Text(text = "어떡해",
            textAlign = TextAlign.Center,
            modifier = Modifier
                .weight(3f)
                .background(Color.Blue))
    }