Swift UI : ScrollView vs List

ScrollView


                        
ScrollView{

                            Text("Alo")

                            Text("Alo")

                            Text("Alo")

                            Text("Alo")

                            Text("Alo")

                            Text("Alo")

                            Text("Alo")

                            Text("Alo")

                            Text("Alo")

                        }.padding()


List

                        List{

                            Text("Alo")

                            Text("Alo")

                            Text("Alo")

                            Image("dessert")

                            Image("dessert")

                            Image("dessert")

                            Image("dessert")

                        }.padding()


Syntax giống nhau nhưng scrollview ko bị "heavily formatte" (scrollview ko tuân theo format của Apple).

List chỉ có thể scroll theo chiều dọc, còn scrollview thì scroll đc theo cả dọc lẫn ngang

Nếu hard code list có nhiều hơn 10 element thì preview sẽ bị lỗi. Để xử lý lỗi này có thể dùng Group:

List {
Group{
// add 10 images inside this group 
            }
Group{
                // add 10 images inside this group 
            }
        }

hoặc dùng dynamic element

struct ContentView: View {
    let elements = ["Reservation", "Contacts", "Restaurant Locations"]
    var body: some View {
        List {
ForEach(elements, id: \.self) {element in
                Text(element)
            }
        }
.padding()
    }
}

Note: lưu ý phải có id để Swift UI phân biệt được giữa các phần tử với nhau.

Mặc dù List tuân theo format của Apple nhưng Apple cũng cung cấp khá nhiều UI default cho list khá là đẹp


struct ContentView: View {
    let elements = ["Reservation", "Contacts", "Restaurant Locations"]
    var body: some View {
        List {
Section(header: Text("Important Information")) {
Text("This List shows information about our restaurant pages")
                    .font(.headline)
            }

ForEach(elements, id: \.self) {element in
                Text(element)
            }

Section(footer: Text("More Information")) {
Text("Contact us as (212) 555 3231")
            }
        }
.padding()
    }
}

Result:








Nhận xét

Bài đăng phổ biến từ blog này

Flutter 4.5 - Custom theme, font, image

Flutter 1.2 - Flutter Architecture

Flutter 2.5 - First App | Building a Widget Tree