[아람별] GroupBoxStyle프로젝트2022. 8. 8. 23:21
Table of Contents
오늘 아람별 프로젝트를 진행하면서 GroupBoxStyle를 처음 사용하게 되었다.
GroupBox를 커스텀하려고 찾아보니 정보도 별로 없는 거 같아서,,, 시작하기 전부터 겁먹었는데 막상해보니 간단했다(?!)
우선 오늘 예시로 들 코드와 완성화면이다.
struct CustomGroupBoxStyle : GroupBoxStyle{
var background: some View {
RoundedRectangle(cornerRadius: 5)
.stroke(Color.yellow,lineWidth: 2)
}
func makeBody(configuration: Configuration) -> some View {
VStack{
configuration.label
configuration.content
}
.padding().frame(width:250).background(background)
}
}
struct MainSwiftUIView: View {
var body: some View {
GroupBox() {
Group{
Text("A코스 / 한식")
Text("부대덮밥")
Text("우동국")
Text("부들어묵볶음")
Text("치커리오리엔탈소스무침")
Text("배추김치")
Text("망고주스")
}
}.groupBoxStyle(CustomGroupBoxStyle())
}
}
초반에는 사람들이 적어둔 코드를 긁어와 적용해 보면서 이게 어떤 기능을 하는지 알아봤다.
1. configuration.label 와 configuration.content
- label과 content가 뭐길래 VStack으로 묶나 싶어, 배경색을 줘서 확인해 봤더니 label(노란색)은 GroupBox에 파라미터로 지정해준 label이고, content(회색)는 GroupBox 안에 있는 자식 요소들이었다.
struct CustomGroupBoxStyle : GroupBoxStyle{
var background: some View {
RoundedRectangle(cornerRadius: 5)
.stroke(Color.yellow,lineWidth: 2)
}
func makeBody(configuration: Configuration) -> some View {
VStack{
configuration.label.background(Color(.yellow))
configuration.content.background(Color(.gray))
}
}
}
struct MainSwiftUIView: View {
var body: some View {
GroupBox("hi") {
Group{
Text("A코스 / 한식")
Text("부대덮밥")
Text("우동국")
Text("부들어묵볶음")
Text("치커리오리엔탈소스무침")
Text("배추김치")
Text("망고주스")
}
}.groupBoxStyle(CustomGroupBoxStyle())
}
}
2. GroupBox Border에 cornerRadius VS background 변수 RoundedRectangle
- 처음엔 직접 Vstack border에 cornerRadius를 줘봤는데, 모서리가 이상하게 나왔다 ㅠ 그 이유를 찾아보니 (https://nsios.tistory.com/178 참고했음 ) stroke 대신 border를 사용했기 때문이었는데 stroke, strokeborder를 사용하려고 하니 some view에서는 그런 멤버가 없다는 에러가 떴다. 그래서 많은 사람들이 사용하는 RoundedRectangle을 사용해보니 쉽게 해결됐다 ~ ㅎㅎ RoundedRectangle 말고도 Circle을 넣어도 잘 실행됐다 ~
[GroupBox Border에 cornerRadius]
[background 변수 RoundedRectangle]
[background 변수 Circle]
'프로젝트' 카테고리의 다른 글
아람별 개인 정보 정책 (0) | 2023.03.13 |
---|---|
아람별 APP (0) | 2023.03.13 |
[아람별] TabView의 PageTabViewStyle() (0) | 2022.08.10 |
@gani+ :: Gani_Dev :)
꾸준히 기록할 수 있는 사람이 되자 !