TextEditor 자동 스크롤 오류, cursor 위치 따라가기

TextEditor 자동 스크롤 오류, cursor 위치 따라가기

ScrollView //전체 스크롤이 내려감 

 -- VStack 
	 -- TextEditor(title)
   -- TextEditor(content) // 여기

위와 같은 구조로 되어있음

 

TextEditor 의 컨텐츠 내용이 길다보면 화면을 넘어가기 떄문에 ScrollView로 감싸서 아래로 쭉 스크롤이 가능할것이다.

TextEditor(text: $store.content.sending(\\.setContent))
            .focused($focusedField, equals: .content)
            .frame(minHeight: 160, maxHeight: .infinity)
            .font(.system(size: 16))

그런데 문제는

텍스트의 컨텐츠를 길게(스크롤 될 정도로) 넣고 포커스를 주면 TextEditr의 가장 위쪽을 눌러도 아래로 스크롤이 쭉 내려감

• 커서 위치는 가장 위쪽 이지만 스크롤은 가장 아래

아래부터 작성할거라 생각하지만 수정 페이지같은 경우는 위쪽을 수정할수도 있기에 다시 위로 올라와야하는 번거로움이 있음

 

또 텍스트 입력시 스크롤이 되돌아 가지도 않고

마지막줄 줄 넘김에도 스크롤이 커서를 따라가지 않는 문제도 있음

 

하지만 TextEditor가 고정 높이를 가지고 있을시 해당 문제가 발생하지 않았음.

TextEditor 자체에도 스크롤이 있고 고정높이를 가졌을때 TextEditor 자체 스크롤이 들어감

나의 문제는 전체 스크롤이 내려 가는 문제이기 때문에

전체 스크롤을 없애면? 그리고 텍스트 에디터의 스크롤만 가능하게하면? 해결 가능

 -- VStack 
	 -- TextEditor(title)
   -- TextEditor(content)

 이렇게 하면 title 이 짧아도 이상하게 TextEditor(title) 영역이 아래와 동일하게 높이가 잡혀서

minHeight 을 지정해줘도 늘어나게 되는데 title TextzEditor에도 fixedSize 옵션을 넣어주면 된다.

 

 TextEditor(text: $store.title.sending(\\.setTitle))
    .focused($focusedField, equals: .title)
    .frame(minHeight: 30)
    .fixedSize(horizontal: false, vertical: true)  // 컨텐츠 크기에 맞게 동적으로 조절

fixedSize vertical이 true인데 이래야 동적으로 늘어난다고 함,

fixedSize가 아니라 dynamicSize 로 이름이 바뀌어야 할듯..

 

이러면 전체 스크롤이 안움직이고 (없으니까)

편하게 포커싱이 가능해진다.

 

불필요한 하단 스크롤도 없어지고, 입력할시 커서에 따라가기도 하고 , 줄넘김시 자동 스크롤도 정상 동작한다.

결론 ScrollView + TextEditor는 문제가 있다.

 

UIKit으로 돌려서 해결하거나 이외 라이브러리를 써서 해결하는것보다 UI를 바꾸는게 더 현명한 해결방법이 아닐까 생각…