[Rust] fltk: Flex 레이아웃

#Rust

Flex 레이아웃을 사용해 컴포넌트들을 그룹화하고 정렬하는 법을 다뤄보겠다.

Flex: Column

Flex는 내부의 구성요소를 일정한 비율로 나눠주는 레이아웃 컴포넌트다.
만약 아래와 같이 가로:50, 세로:100의 플렉스를 만들고 안에 버튼을 2개 둔다면,

이렇게 위아래로 나누어서 배치를 해준다.
내부 컴포넌트의 사이즈를 뭘로 정했든 간에, Flex의 크기를 기준으로 1/N해서 사이즈가 잡힌다는 것에 유의하자.
그래서 저기 버튼에 넣은 사이즈값은 무시된다.

만약 특정 요소만 길이를 다르게 주고 싶다면 이렇게, 사이즈를 명시적으로 줘야 한다.

그럼 30:70으로 분배가 될 것이다.

그리고 만약 좌우로 나누어지게 하고 싶다면, Row 옵션을 주면 된다.
기본값이 Column이었던 것이다.

패딩은 html:css에서 사용되는 개념과 거의 동등하다.
자식 요소들 사이의 거리를 추가해주는 것이다.
이렇게 패딩을 10 주면

사이사이에 10만큼의 공백이 생긴다.

마진은 간격을 준다는 점에서는 비슷해보이지만, 외부 컴포넌트와의 사이에 여백을 준다는 것이 다르다.
마진을 10 주면

이렇게 여백이 사방에 10칸씩 생긴다.

Flex의 중첩도 얼마든지 가능하다.
다음과 같은 형태로 짜면 3x3의 바둑판 구성이 가능하다.