Назначение NavigationLink изображениям в массиве в пользовательском интерфейсе Swift

У меня есть массив изображений, которые я передаю через LazyVgrid.

Мне интересно, как я назначаю NavigationLink именам изображений, хранящимся в массиве, щелкая по значку 1, вы переходите на страницу 1 и т. д. Для всех 8.

------ Быстрый интерфейс -------

import SwiftUI

    struct Grid: View {
        var images: [String] = ["icon1", "icon2", "icon3", "icon4",
                                 "icon5", "icon6", "icon7","icon8"]
        
        var columnGrid: [GridItem] = [GridItem(.flexible(), spacing: 25), GridItem(.flexible(), spacing: 25)]
        
        var body: some View {
            LazyVGrid(columns: columnGrid, spacing: 50) {
                ForEach(images, id:\.self) { image in
                    Image(image)
                        .resizable()
                        .scaledToFill()
                        .frame(width: (UIScreen.main.bounds.width / 2.75 ) - 1,
                               height: (UIScreen.main.bounds.width / 2.75 ) - 1)
                        .clipped()
                        .cornerRadius(25)
                        
                        
                }
            }
        }
    }

Это ответ на ваш вопрос stackoverflow.com/a/64230971/12299030?

Asperi 23.04.2022 14:12
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
1
38
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для таких случаев я бы предпочел перечисление, которое содержит всю связанную информацию. Вы также можете сделать это с помощью структуры, причина которой остается прежней.

enum ImageEnum: String, CaseIterable{ //Please find a better name ;)
    case image1, image2 
    
    var imageName: String{ // get the assetname of the image
        switch self{
        case .image1:
            return "test"
        case .image2:
            return "test2"
        }
    }
    
    @ViewBuilder
    var detailView: some View{ // create the view here, if you need to add
        switch self{           // paramaters use a function or associated
        case .image1:          // values for your enum cases
            TestView1()
        case .image2:
            TestView2()
        }
    }
}

struct TestView1: View{
    var body: some View{
        Text("test1")
    }
}

struct TestView2: View{
    var body: some View{
        Text("test2")
    }
}

И ваш Grid Просмотр:

struct Grid: View {
    
    var columnGrid: [GridItem] = [GridItem(.flexible(), spacing: 25), GridItem(.flexible(), spacing: 25)]
    
    var body: some View {
        NavigationView{ // Add the NavigationView
            LazyVGrid(columns: columnGrid, spacing: 50) {
                ForEach(ImageEnum.allCases, id:\.self) { imageEnum in // Itterate over all enum cases
                    NavigationLink(destination: imageEnum.detailView){ // get detailview here
                        Image(imageEnum.imageName) // get image assset name here
                            .resizable()
                            .scaledToFill()
                            .clipped()
                            .cornerRadius(25)
                    }
                }
            }
        }
    }
}

Результат:

Result

Какой удивительный ответ, большое спасибо

Flamee 24.04.2022 23:22

Я проверил это через тест, и я не получаю никаких изображений, отображаемых на главном экране, я думаю, что не понимаю структуру, находится ли Testview1 в новом файле или с ImageEmun, поскольку я думал, что это не будет сделать другой

Flamee 25.04.2022 01:26

@Flamee тебе удалось заставить это работать? Если нет, попробуйте переименовать возвращаемые значения в imageName var в вашем перечислении, чтобы они соответствовали именам активов в вашем случае, например. icon1....

burnsi 25.04.2022 11:05

Теперь все работает отлично! спасибо! Как-то играл с ним

Flamee 26.04.2022 11:43

Другие вопросы по теме