Flex 패널 구조체 멤버

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

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

속성 목록

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

기본 속성

이름

• 구조체 속성: 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 패널 구조체를 활용하여 다양한 레이아웃을 구성할 수 있습니다.