ListView를 이용한 화면 구성

 

 

 

 

 

 

ListView

 기차 앱의 마지막 화면으로 좌석을 선택하는 화면을 만들었다. 이때 선택하는 좌석 부분을 ListView로 구성을 해야했다. 역을 선택하는 화면에서 ListView를 이용했었다. 그래서 쉽게 구성할 것이라고 생각을 했었다. 하지만 이번에는 화면에 ListVeiw로만 구성하는 것이 아니라 다른 구성요소들 사이에 ListView를 넣는 것이었다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 처음에는 이렇게 했다. 화면을 보면 좌석이 좌우 2줄씩 총 4줄로 구성되어있다. 그래서 세로줄로 된 위젯을 만들고 이것을 가로로 나열 하려고 코드를 짰다.

그렇게 하니 리스트뷰를 포함해서 화면 하단의 버튼도 같이 나오지 않는 문제가 발생했다. ListView의 영역이 정해지지 않아서 오류가 발생한거같아 화면에 padding, sizedbox 등 여러 속성으로 화면의 사이즈를 정하고 그 안에서 나오게 하려고했다.그러나 이것이 아예 방향을 잘 못 잡아서 발생한 문제로 해결방법은 따로 있었다.

 

 

 

 

 

 

 

바로 가로가 아닌 세로로 구성하고 이를 나열해야 했던 것이다.

위젯을 가로로 구성하고 ListView에 넣어서 사용을 해보니 의도한데로 나오기 시작했다.

 

 

 

 

	Expanded(
                  child: ListView(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Text(
                            'A',
                            style: TextStyle(fontSize: 18),
                          ),
                          Text(
                            'B',
                            style: TextStyle(fontSize: 18),
                          ),
                          Text(
                            '   ',
                            style: TextStyle(fontSize: 18),
                          ),
                          Text(
                            'C',
                            style: TextStyle(fontSize: 18),
                          ),
                          Text(
                            'D',
                            style: TextStyle(fontSize: 18),
                          ),
                        ],
                      ),
                      row(1),
                      row(2),
                      row(3),
                      row(4),
                      row(5),
                      row(6),
                      row(7),
                      row(8),
                      row(9),
                      row(10),
                      row(11),
                      row(12),
                      row(13),
                      row(14),
                      row(15),
                      row(16),
                      row(17),
                      row(18),
                      row(19),
                      row(20),
                    ],

 

ListView를 구성한 코드이다.

여기에 위젯 코드는 따로 적진않겠다.

 

보면 ListView를 처음에 Expanded로 감싸주고 있다. Expanded는 자신이 감싸고 있는 자식들이 사용가능한 공간을 모두 감싸주는 역할을 합니다. 이를 통해서 ListView의 영역을 지정한 것이다. ListView는 스크롤을 해야하기때문에 정해진 공간이 필요해서 Expanded를 사용했다. 그리고 나서 row위젯을 쭉 원하는 좌석 수 만큼 나열해서 화면에 뿌려주었다. 그리고 좌석의 열을 표시하는 A,B,C,D는 간단하게 화면에 텍스트로 만들어서 표시되게 만들었다.