[Compose] Modifier

💡 modifier 속성을 활용해보자

fillMaxSize 사용해보기

modifier에 Modifier.fillMaxSize()를 사용해보자.

Button(
	onClick = {},
    modifier = Modifier.fillMaxSize()
    ){
    Icon(
    	imageVector = Icons.Filled.Search,
        contentDescription = null
        )
        Spacer(
        	modifier = Modifier.size(ButtonDefaults.IconSpacing)
            )
            Text("검색")
    }

---

height 설정해보기

fillMaxSize 대신 Modifier.height를 설정해보자.

Button(
	onClick = {},
    modifier = Modifier.height(100.dp)
    ){
    Icon(
    	imageVector = Icons.Filled.Search,
        contentDescription = null
        )
        Spacer(
        	modifier = Modifier.size(ButtonDefaults.IconSpacing)
            )
            Text("검색")
    }

---

height와 width 설정해보기

modifier에 height와 width를 같이 설정해보자.

Button(
	onClick = {},
    modifier = Modifier
    	.height(100.dp)
        .width(200.dp)
    ){
    Icon(
    	imageVector = Icons.Filled.Search,
        contentDescription = null
        )
        Spacer(
        	modifier = Modifier.size(ButtonDefaults.IconSpacing)
            )
            Text("검색")
    }

---

size 적용하기

size에 width와 height를 인자로 넣을 수도 있습니다.

Button(
	onClick = {},
   modifier = Modifier.size(300.dp, 200.dp)
   ){
   Icon(
   	imageVector = Icons.Filled.Search,
       contentDescription = null
       )
       Spacer(
       	modifier = Modifier.size(ButtonDefaults.IconSpacing)
           )
           Text("검색")
   }

---

background 설정하기

button에서는 background를 설정할 수 없기 때문에 colors를 이용해서 버튼 색상을 변경해 보자.
backgroundColor는 버튼 색상을 변경, contentColor는 버튼의 내용물 색상을 변경해준다.

Button(
	colors = ButtonDefaults.buttonColors(
  backgroundColor = Color.Yellow,
  contentColor = Color.Red
  ),
	onClick = {},
  modifier = Modifier.size(300.dp, 200.dp)
  ){
  Icon(
  	imageVector = Icons.Filled.Search,
      contentDescription = null
      )
      Spacer(
      	modifier = Modifier.size(ButtonDefaults.IconSpacing)
          )
          Text("검색")
  }

---

Padding 추가하기

Button의 modifier에 padding을 추가해보자.
첫번째 사진: modifier = Modifier.size(100.dp).padding(10.dp)
두번째 사진: modifier = Modifier.size(100.dp).padding(20.dp)

Button(
	colors = ButtonDefaults.buttonColors(
  backgroundColor = Color.Yellow,
  contentColor = Color.Red
  ),
	onClick = {},
  modifier = Modifier.size(100.dp).padding(10.dp)
  ){
  Icon(
  	imageVector = Icons.Filled.Search,
      contentDescription = null
      )
      Spacer(
      	modifier = Modifier.size(ButtonDefaults.IconSpacing)
          )
          Text("검색")
  }

---

clickable 설정하기

Button에 enabled를 false로 설정하고, Text의 modifier에 clickable을 넣어보자.
사진을 보면 버튼 클릭 시 클릭 효과를 볼 수 없고 "검색" text를 클릭하였을 때 클릭 효과를 볼 수 있다.

Button(
	colors = ButtonDefaults.buttonColors(
 backgroundColor = Color.Yellow,
 contentColor = Color.Red
 ),
	onClick = {},
 enabled = fasle,
 modifier = Modifier.size(100.dp).padding(10.dp)
 ){
 Icon(
 	imageVector = Icons.Filled.Search,
     contentDescription = null
     )
     Spacer(
     	modifier = Modifier.size(ButtonDefaults.IconSpacing)
         )
         Text(
         	"검색",
         	modifier = Modifier.clickable{}
         )
 }

---

offset 설정하기

Text의 modifier에 offset을 설정하고 x 파라미터를 설정합니다.
첫번째 사진: modifier = Modifier.offset(x = 10.dp)
두번째 사진: modifier = Modifier.offset(y = 10.dp)
세번째 사진: modifier = Modifier.offset(y = -10.dp)

Button(
	colors = ButtonDefaults.buttonColors(
 backgroundColor = Color.Yellow,
 contentColor = Color.Red
 ),
	onClick = {},
 modifier = Modifier.size(100.dp).padding(10.dp)
 ){
 Icon(
 	imageVector = Icons.Filled.Search,
     contentDescription = null
     )
     Spacer(
     	modifier = Modifier.size(ButtonDefaults.IconSpacing)
         )
         Text(
         	"검색",
         	modifier = Modifier.offset(x = 10.dp)
         )
 }