📘 Flutter/Flutter for SwiftUI Devs

Flutter for SwiftUI Devs - Creating a scroll view

이오🐥 2023. 1. 16. 12:57

 In SwiftUI 

SwiftUI에서는 스크롤하는 페이지를 만들기 위해 ScrollView를 사용한다.

아래 코드에서 persons를 스크롤하며 볼 수 있도록 했다.

지난번에 다루었던 VStack을 사용했고,

stack 내부의 components는 왼쪽 정렬하기 위해 alignment를 .leading으로 설정했다.

ScrollView {
  VStack(alignment: .leading) {
    ForEach(persons) { person in
      PersonView(person: person)
    }
  }
}

 

 In Flutter 

Flutter에서 scroll view를 만들기 위해서는 SingleChildScrollView를 사용한다.

mockPersons라는 임의로 사람들 list를 생성하고,

각 person에 대한 view를 scroll할 수 있는 형태로 보여주기 위해

SingleChildScrollView를 사용했다.

    SingleChildScrollView(
  child: Column(
    children: mockPersons
        .map(
          (person) => PersonView(
            person: person,
          ),
        )
        .toList(),
  ),
),

https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

 

 


 

 

Flutter for SwiftUI Developers

Learn how to apply SwiftUI developer knowledge when building Flutter apps.

docs.flutter.dev