[DU벅이] 층 선택 리스트 뷰( floor_view.dart )

리스트 뷰

실내 정보를 포함하는 길 안내를 하기 위해서는 각 건물마다 사용자가 원하는 층을 볼 수 있는 기능을 구현해야 했다.
이를 위해서 건물마다 터치가 가능하게 만든 후 원하는 건물을 터치 시 선택 가능한 층수가 한 번에 보이게 하고 싶었다.

따라서 나열이 가능하고 너무 많을 시에 스크롤 또한 가능한 리스트 뷰를 선택했다.

트리거

원하는 건물을 터치 시에 리스트 뷰가 보여야 하므로 _showButton 이라는 String 변수를 활용했다.
아무 건물도 터치하지 않을 시에 초기값 _showButton = “기본” 을 저장하고 있다.

건물이 터치될 경우 _showFloorButton 함수를 통해 _showButton 변수가 터치한 건물명으로 변경된다.

• 학술관 터치 → _showButton = “학술관”

_showButton이 “기본” 이 아니게 되면 리스트 뷰를 출력한다.

빌드 과정

1. 경로 ‘assets/images/floor/’ 에서 _showButton 값으로 파일 이름을 검색 후 결과를 리스트(fileNames)로 반환한다.
   이 때 리스트에 들어가는 순서는 사전식 순서(대문자 → 소문자 → 숫자)이다.
   • _showButton = “학술관” → fileNames = [ “학술관B1.png”, “학술관1.png”, “학술관4.png” ]
2. fileNames 리스트를 정규 표현식을 통해 숫자만 뽑아내서 비교 후 순서대로 정렬한다.
   • [ “학술관B1.png”, “학술관1.png”, “학술관4.png” ]
3. fileNames 리스트를 뒤집고 앞에 “시설”, “기본”을 삽입한다.
   • [ “시설”, “기본”, “학술관4.png”, “학술관1.png”, “학술관B1.png” ]
4. 리스트 뷰 상단에 현재 터치된 건물명(showButton)을 표시한다.
5. replaceToBuildingInfo 함수를 통해 fileNames 리스트의 건물 이미지 파일명을 층 수 표기로 변환한다.
   • [ “시설”, “기본”, “4F”, “1F”, “B1” ]
6. 변환한 층 수 표기를 바탕으로 리스트 뷰를 표시한다.

층 수 터치 시

리스트 뷰에서 특정 층이 터치된 경우 onValueChanged를 통해 메인 화면에 아래 두가지를 반환한다.

1. floorToFilePath 함수를 통해 터치된 층의 이미지 파일의 경로(String)를 반환
   • “B1” 터치 → “assets/images/floor/학술관B1.png” 반환
   • “기본” 터치 → showButton 반환
   • “시설” 터치 → “시설” 반환
2. floorToInt 함수를 통해 터치된 층의 층 수(int)를 반환
   • “B1” 터치 → -1 반환
   • “기본” or “시설” 터치 → 0 반환

B1을 터치 했다면 ( “assets/images/floor/학술관B1.png”, -1 ) 을 반환

반환한 값을 바탕으로 nowFloorData(map 자료형: 현재 표시되는 건물의 층 수 저장)의 _showButton을 갱신

• nowFloorData [“학술관”] = -1

만약 “시설”을 반환했다면 gotoBuildingInfo 함수를 통해 시설 정보 화면을 띄움
“시설”이 아니라면 buildingFilePath(map 자료형: 현재 건물의 단면도 파일 경로 저장)의 _showButton을 갱신

• buildingFilePath[“학술관”] = “assets/images/building/학술관B1.png”

이후 해당 층 단면도에 표시되야할 경로가 있는 경우 경로 표시 → 다른 포스팅을 통해 설명 예정