티스토리 뷰

Attribute Menu - Text Value Row

이제 만들 것은 텍스트 + 프레임 값(Frame Value) 형태의 Row 위젯이다.

먼저 저번과 동일하게 위젯 블루프린트 생성 후, SizeBox까지 할당해주자.

 

이어서 똑같이 가로 세로에 대해 변수로 관리해줄 것이다.

 

우리가 원하는 건 왼쪽에 텍스트, 오른쪽에 Frame Value를 위치시키는 이다.

따라서 Horizontal Box를 사용해 좌 -> 우 방향 배치가 가능하도록 할 것이다.

 

해당 Box 배치후 좌측에 Text를 정렬시켜주자.

글짜 크기, 폰트, 아웃라인 유무를 적절히 조절해주고, 추가로 Letter Spacing 옵션을 통해 글자 간격을 조절할 수 있다.

 

이제 우측에 저번 강의에서 만들었던 Frame Value 위젯을 추가해주자.

우측 정렬 및 Fill 옵션을 통해 오른쪽 끝으로 이동시켜 줄 것인데, 이때 너무 붙이 않도록 Spacer를 통해 우측 간격을 제어한다.

 

지금은 예시로 Attribute 문구를 작성했지만, Critical Reristance와 같이 상당히 긴 이름의 Attribute가 위치할 수 있다.

따라서 BoxSize Width를 기존 450에서 800까지로 확장하였다.

추가로 Frame Value의 Vertical 정렬이 Fill 상태이기 떄문에, 남는 공간을 모두 차지하려 하면서 크기가 강제로 늘어나게 된다.

이 경우 Frame Value의 비율이 늘어나 깨질 수 있으므로, 원래 크기를 유지할 수 있도록 Fill에서 Center로 수정해주었다.

 

그리고 나중에 버튼이 있는 버전도 만들 것이기에, 이를 위해 미리 Named Slot을 가장 우측에 추가해줄 것이다.

지금 당장은 사용하지 않지만, 현재 위젯을 부모로 사용하여 하위 위젯에서 추가 UI를 사입할 수 있도록 설계한 것이다.

그리고 추가된 Named Slot에 맞게 Spacer 간격을 조정해주자.

 

이제 Named Slot을 활용해 마지막에 버튼이 있는 Row도 제작할 것이다.

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2026/05   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함