Manual

Flex 패널 구조체 멤버

이재협/실장/시스템개발실/PHYSIA

이재협/실장/시스템개발실/PHYSIA

— 3 min read

Flex 패널 노드를 생성할 때 flexpanel_create_node를 사용하여 노드 및 자식에 대한 정보를 포함하는 구조체 또는 JSON 문자열을 전달할 수 있습니다. 예를 들어, 다음과 같이 정의할 수 있습니다:

이 구조체는 루트 노드와 그 안에 중첩된 자식 노드를 정의합니다.

속성 목록

구조체 또는 JSON 문자열에서 정의할 수 있는 속성은 다음과 같습니다:

속성 이름 설명
name 노드의 이름
data 노드에 저장할 데이터
nodes 자식 노드 배열
width 노드의 너비
height 노드의 높이
minWidth 최소 너비
maxWidth 최대 너비
minHeight 최소 높이
maxHeight 최대 높이
left 왼쪽 여백
right 오른쪽 여백
top 위쪽 여백
bottom 아래쪽 여백
alignContent 콘텐츠 정렬
alignItems 아이템 정렬
alignSelf 자기 정렬
aspectRatio 종횡비
display 디스플레이 모드
flex 플렉스 속성
flexGrow 플렉스 성장
flexShrink 플렉스 축소
flexBasis 플렉스 기준
flexDirection 플렉스 방향
flexWrap 플렉스 래핑
justifyContent 주 축 정렬
direction 방향
gap 간격
margin 여백
padding 패딩
border 테두리
position 위치
positionType 위치 유형

기본 속성

이름

  • 구조체 속성: name
  • 함수: flexpanel_node_set_name, flexpanel_node_get_name

각 노드에 선택적이고 고유하지 않은 이름을 부여할 수 있습니다. 이는 최종 레이아웃 데이터를 사용할 때 노드를 식별하는 데 도움이 됩니다.

데이터

  • 구조체 속성: data
  • 함수: flexpanel_node_get_data

노드에 데이터를 저장할 수 있는 data 멤버를 제공할 수 있습니다. 이 데이터는 레이아웃에 영향을 미치지 않으며, 사용자가 원하는 데이터를 저장하는 데 사용됩니다.

노드

  • 구조체 속성: nodes
  • 함수: flexpanel_node_insert_child, flexpanel_node_remove_child, flexpanel_node_remove_all_children, flexpanel_node_get_child

nodes 멤버는 현재 노드 아래의 자식 노드를 정의하는 배열입니다. 각 노드는 이 페이지에 설명된 동일한 형식의 구조체입니다.

스타일링 속성

너비 및 높이

  • 구조체 속성: width, height
  • 함수: flexpanel_node_style_set_width, flexpanel_node_style_set_height, flexpanel_node_style_get_width, flexpanel_node_style_get_height

이 속성들은 노드의 "테두리 박스"의 너비와 높이를 정의합니다.

최소/최대 너비 및 높이

  • 구조체 속성: minWidth, maxWidth, minHeight, maxHeight
  • 함수: flexpanel_node_style_set_min_width, flexpanel_node_style_set_max_width, flexpanel_node_style_set_min_height, flexpanel_node_style_set_max_height, flexpanel_node_style_get_min_width, flexpanel_node_style_get_max_width, flexpanel_node_style_get_min_height, flexpanel_node_style_get_max_height

이 속성들은 노드가 유지해야 하는 최소 및 최대 크기를 정의합니다.

종횡비

  • 구조체 속성: aspectRatio
  • 함수: flexpanel_node_style_set_aspect_ratio, flexpanel_node_style_get_aspect_ratio

이 속성은 노드가 유지해야 하는 종횡비를 정의합니다.

여백

  • 구조체 속성: margin, marginInline, marginLeft, marginRight, marginTop, marginBottom, marginStart, marginEnd, marginHorizontal, marginVertical
  • 함수: flexpanel_node_style_set_margin, flexpanel_node_style_get_margin

노드의 외부 여백을 정의합니다.

패딩

  • 구조체 속성: padding, paddingLeft, paddingRight, paddingTop, paddingBottom, paddingStart, paddingEnd, paddingHorizontal, paddingVertical
  • 함수: flexpanel_node_style_set_padding, flexpanel_node_style_get_padding

노드와 자식 간의 내부 여백을 정의합니다.

활용 예제

기본 노드 생성

var rootNode = flexpanel_create_node({
    name: "Root",
    width: "100%",
    height: "100%",
    nodes: []
});

자식 노드 추가

var childNode = flexpanel_create_node({
    name: "Child",
    width: "50%",
    height: "50%"
});
flexpanel_node_insert_child(rootNode, childNode);

노드 스타일 설정

flexpanel_node_style_set_margin(childNode, 10);
flexpanel_node_style_set_padding(childNode, 5);

노드 데이터 설정

flexpanel_node_set_data(childNode, { key: "value" });

레이아웃 방향 설정

flexpanel_node_style_set_flex_direction(rootNode, "row");

정렬 설정

flexpanel_node_style_set_justify_content(rootNode, "space-between");
flexpanel_node_style_set_align_items(rootNode, "center");

플렉스 성장 및 축소 설정

flexpanel_node_style_set_flex_grow(childNode, 1);
flexpanel_node_style_set_flex_shrink(childNode, 1);

이와 같은 방식으로 Flex 패널 구조체를 활용하여 다양한 레이아웃을 구성할 수 있습니다.

← 이전 글: Flex 패널 사용법