Flutter for SwiftUI Devs - Displaying a list view

 Displaying a list view 

SwiftUI에서 item을 list로 보여주기 위해 List를 사용한다.

Model objects를 화면에 표시하기 위해 model objects를

식별할 수 있어야 한다(Being able to identify).

이때, Identifiable protocol을 사용한다.

 

(공식 문서의 예시 코드에서는 Identifiable protocol을 사용한

Person struct가 id를 가지고 있지 않아 오류가 날 수 있다.

Identifiable을 따르기 위해서는 각각이 구별가능하도록 id를 사용해주어야 한다.)

struct Person: Identifiable {
  var id = UUID()
  var name: String
}

struct ListWithPersons: View {
  let persons = [
    Person(name: "Person 1"),
    Person(name: "Person 2"),
    Person(name: "Person 3"),
  ]
  
  var body: some View {
    List {
      ForEach(persons) { person in
        Text(person.name)
      }
    }
  }
}

 

위 방법은 Flutter에서 list를 만드는 것과 비슷하지만,

Flutter는 list가 identifiable 할 필요는 없다.

각 item을 화면에 표시하기 위해 item의 수를 설정하게 된다.

class Person {
  String name;
  Person(this.name);
}

var items = [
  Person('Person 1'),
  Person('Person 2'),
  Person('Person 3'),
];

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(items[index].name),
          );
        },
      ),
    );
  }
}

 

Flutter는 몇 가지 주의사항이 있다.

• ListView는 builder 메서드가 있다.
  SwiftUI에서의 ForEach와 비슷한 동작을 한다.
• itemCount parameter는 ListView에 표시될 item의 수를 설정하는 것이다.
• itemBuilder는 index parameter가 있다.
  index는 itemCount보다 0 또는 1만큼 작다.

 

 

---

 

Flutter for SwiftUI Developers