몰입하다보면 하루하루 글을 작성하기로 한 걸 깜빡한다.
의식적으로 자주 올리려고 노력해야겠다.
개요
간단하게 계산기를 만들고 있는데
물론 계산기 자체가 만드는데 어려운 것은 아니다. 다만 디테일한 부분을 챙기다 보니 여러가지 문제해결을 경험하게 되는 것 같다.
간격문제를 해결했다고 거창하게 써놨지만 사실 알게된사실 느낌이다..
지금까지 VStack, ZStack 등 스택 컨테이너 뷰의 중괄호 바로 다음에
Color(.white) 라고 쓰는게 나는 background 색상을 지정해주는 부분이라고 생각했다.
이 부분 때문이었던 것 같은데.. ignoresSafeArea를 사용하게 되면
노치, 홈바, 상태바 등 시스템UI를 제외한 모든 부분을 앞에 적혀있는 색상으로 바꿔주기 떄문이다.
간격문제?
자 그래서 뭔가 문제냐
1 . 숫자를 입력하다가 일정 길이(container width)를 넘어가게되면 Text 컨테이너의 minimumScaleFactor속성을 이용해 텍스트의 크기를 자연스럽게 줄어들게 만든다.
2 . 그리고 계속 줄어들다가 특정 크기 (minFontSize / maxFontsize)에 도달할 경우 더이상 줄어들지 않고 컨테이너가 ScrollView로 변경되며 스크롤이 가능해진다.
그런데 이제 다음 2번으로 넘어가면서 문제가 발생한다.
잘 보면 계산기 키패드와 숫자가 보여지는 컨테이너 사이에 간격이 존재하는데
ScrollView로 레이아웃이 바뀌면서 간격이 아예 사라져버린다
HStack {
if(!isNeedScroll) {
Spacer()
// formatNumber는 본인이 만든 함수
Text(formatNumber(input: total))
.font(.system(size: maxFontSize))
.minimumScaleFactor(minFontSize / maxFontSize)
.lineLimit(1)
.background(GeometryReader { proxy in
Color.clear.preference(key: FontSizePreferenceKey.self, value: proxy.size.height)
} )
.onPreferenceChange(FontSizePreferenceKey.self) { value in
if value != 0 && value <= initTextHeight * 0.76 {
isNeedScroll = true
}
}
} else {
ScrollView(.horizontal, showIndicators: false) {
Text(formatNumber(input: total))
.font(.system(size: maxFontSize * (minFontSize / maxFontSize)))
.lineLimit(1)
.foreground(.white)
}
}
}
공식 문서와 다양한 글을 봤을때 Stack과 ScrollView간 차이에 자식 요소들간 간격에만 차이가 있었고 패딩값은 연관이 딱히 없었다.
Color와 Spacer를 여러곳에 넣으면서 실험해보니
ScrollView로 레이아웃이 바뀌면 기존에 차이하지 않았던 숫자 아래쪽 영역까지 잡힌다.
우선 해결한건 ScrollView 최하단에 Color(.clear)를 넣어서 해결했다.
하지만 이건 해결이라고 볼 수 없어서 더 알아봐야한다.
