본문으로 건너뛰기

GridView (그리드뷰) Widget Control

GridView(그리드뷰) 위젯을 스크립트에서 제어할 때 사용하는 Widget Control(Property · Method · Event) 목록입니다. 위젯 소개와 사용법은 GridView 문서를 참고하세요.

정보

아래 예시의 gridviewID는 캔버스에서 GridView 위젯에 지정한 이름(ID)입니다. 스크립트에서는 위젯ID.멤버 형태로 접근합니다.

Widget Control 요약​

Widget Control종류시그니처설명
countPropertycount(읽기/쓰기, 정수)반복 항목 개수를 읽거나 설정
currentPropertycurrent(읽기/쓰기, 정수)바인딩 스코프로 쓰이는 현재 항목 인덱스
selectPropertyselect(읽기/쓰기, 정수)선택된 항목 인덱스
addMethodadd() → 정수새 항목을 끝에 추가하고 그 인덱스를 반환
insertMethodinsert(index)지정 인덱스에 새 항목 삽입
removeMethodremove(index)지정 인덱스 항목 제거
clearMethodclear()모든 항목 제거
setStateMethodsetState(index, callback)특정 항목 스코프에서 콜백 실행 후 해당 항목만 갱신
scrollToIndexMethodscrollToIndex(index, duration)지정 항목이 보이도록 스크롤(즉시 또는 애니메이션)
getFirstVisibleIndexMethodgetFirstVisibleIndex() → 정수첫 번째로 보이는 항목 인덱스를 반환
onSelectedEventonSelected = (index) => { ... }사용자가 항목을 탭했을 때 실행

Property​

count​

반복 항목 개수를 읽거나 설정합니다. 값을 설정하면 바인딩된 데이터 리스트가 그만큼 늘거나 줄고 그리드를 다시 그립니다.

  • 종류: Property (읽기/쓰기)
  • 타입 / Returns: number(정수)

Example

gridviewID.count = 10;
const n = gridviewID.count;

current​

현재 바인딩 스코프로 쓰이는 항목 인덱스를 읽거나 설정합니다. 설정하면 이후 속성 쓰기가 해당 항목 행을 대상으로 합니다. 설정된 값이 없으면 읽을 때 -1을 반환합니다.

  • 종류: Property (읽기/쓰기)
  • 타입 / Returns: number(정수)

Example

gridviewID.current = 2;
const i = gridviewID.current;

select​

선택된 항목 인덱스를 읽거나 설정합니다. 선택된 항목이 없으면 읽을 때 -1을 반환합니다.

  • 종류: Property (읽기/쓰기)
  • 타입 / Returns: number(정수)

Example

gridviewID.select = 0;
const sel = gridviewID.select;

Method​

add​

새 빈 항목을 끝에 추가하고 그리드를 다시 그립니다.

  • Parameters: 없음
  • Returns: number(정수) - 새로 추가된 항목의 인덱스

Example

const i = gridviewID.add();

insert​

지정한 인덱스에 새 빈 항목을 삽입하고 그리드를 다시 그립니다.

  • Parameters: index (number, 정수) - 새 항목을 삽입할 위치
  • Returns: 없음

Example

gridviewID.insert(0);

remove​

지정한 인덱스의 항목을 제거하고 그리드를 다시 그립니다. 인덱스가 범위를 벗어나면 아무 동작도 하지 않습니다.

  • Parameters: index (number, 정수) - 제거할 항목 인덱스
  • Returns: 없음

Example

gridviewID.remove(0);

clear​

모든 항목을 제거하고 그리드를 다시 그립니다.

  • Parameters: 없음
  • Returns: 없음

Example

gridviewID.clear();

setState​

바인딩 스코프를 지정한 항목으로 맞춘 상태에서 콜백을 실행한 뒤, 그 항목만 다시 그립니다. 한 항목의 바인딩된 속성만 갱신할 때 사용합니다.

  • Parameters: index (number, 정수) - 갱신할 항목 인덱스 · callback (function) - 해당 항목 스코프에서 실행할 콜백
  • Returns: 없음

Example

gridviewID.setState(0, () => {
  // 인덱스 0 항목의 바인딩 속성 갱신
});

scrollToIndex​

지정한 항목이 화면에 보이도록 스크롤합니다. 인덱스는 crossAxisCount 기준으로 행/열 위치로 변환됩니다. duration이 없거나 0 이하이면 즉시 이동하고, 그 외에는 해당 밀리초 동안 애니메이션합니다. 그리드가 아직 레이아웃되지 않았으면 아무 동작도 하지 않습니다.

  • Parameters: index (number, 정수) - 스크롤할 항목 인덱스 · duration (number | null, 정수) - 애니메이션 시간(밀리초), null 또는 0이면 즉시 이동
  • Returns: 없음

Example

gridviewID.scrollToIndex(20, 300);

getFirstVisibleIndex​

첫 번째로 보이는 행/열의 항목 인덱스를 반환합니다. 그리드가 아직 레이아웃되지 않았으면 0을 반환합니다.

  • Parameters: 없음
  • Returns: number(정수) - 첫 번째로 보이는 항목 인덱스

Example

const index = gridviewID.getFirstVisibleIndex();

Event​

onSelected​

사용자가 그리드의 항목을 탭했을 때 실행됩니다. 탭한 항목의 인덱스가 콜백 인자로 전달됩니다.

  • 종류: Event
  • 핸들러: index(정수) 인자를 받는 콜백 함수
  • Returns: 없음

Example

gridviewID.onSelected = (index) => {
  // index 항목이 선택됨
};

공통 Widget Control (모든 위젯)​

노트

모든 위젯은 setProperty / getProperty / setStyleProperty 같은 이름 기반 공통 Widget Control(Method)을 사용할 수 있습니다. 공통 레퍼런스 문서(작성 예정)를 참고하세요.