Swift List row background color not changing

Viewed 58

I am working on minimizable side menu with collapsable sub menus in swift. Currently both the minimizing and collapsable submenu components are working. I have spent all evening trying to set the background color of the menu items. As it stands listRowBackground does nothing. I have come across other stack overflow (and other websites) posts talking about this. Some say to use for each loops. Below I have another SideMenu struct using a for each loop. This loop moves the side menu to the center of the screen. Can someone help me with either of these approaches to keep the menu on the left hand side of the screen and change the row background color?

Any help is appreciated!

Edit: I have also updated Xcode to version 14, but it did not help.

import SwiftUI

struct SideMenu: View {
    let width: CGFloat
    @Binding var menuOpened: Bool
    var items: [Menu] = [.item0, .a, .b, .c]
    var body: some View {
        ZStack {
            VStack(alignment: .leading){
                HStack{
                    List(items, children: \.items){ row in
                        HStack{
                        if row.imageName != ""{
                            let image = Image(systemName: row.imageName)
                            image.resizable()
                                .aspectRatio(contentMode: .fit)
                                .foregroundColor(.black)
                                .frame(width: 32, height: 32, alignment: .center)
                        }else{
                            Text(row.name).listRowBackground(Color.orange)
                        }
                        }.listRowBackground(Color.orange)
                        .onTapGesture {
                            if row.imageName == "line.horizontal.3"{
                                menuOpened.toggle()
                            }
                        }
                    }
                    .background(Color.red)
                    .listStyle(.plain)
                    .frame(width: menuOpened ? 275 : 80)
                    Spacer()
                }
            }
        }
    }
}

struct Menu: Identifiable{
    let id = UUID()
    var name = ""
    var imageName = ""
    var items: [Menu]?
    
}

struct ContentView: View {
    @State var menuOpened = true
    var body: some View {
        SideMenu(width: UIScreen.main.bounds.width/1.6, menuOpened: $menuOpened)
        }
    }

extension Menu{
    static var item1 = Menu(name: "a1")
    static var item2 = Menu(name: "a2")
    static var item3 = Menu(name: "a3")
    static var item0 = Menu(imageName: "line.horizontal.3")
    static var a = Menu(name: "a", items: [.item1, .item2, item3])
    static var b = Menu(name: "b")
    static var c = Menu(name: "Settings")
    
}

Here is a struct with a for each loop

struct SideMenu: View {
    let width: CGFloat
    @Binding var menuOpened: Bool
    var items: [Menu] = [.item0, .a, .b, .c]
    var body: some View {
        ZStack {
            VStack(alignment: .leading){
                HStack{
                    List {
                        ForEach(items) { row in
                            HStack{
                                if row.imageName != ""{
                                    let image = Image(systemName: row.imageName)
                                    image.resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .foregroundColor(.black)
                                    .frame(width: 32, height: 32, alignment: .center)
                                }else{
                                    Text(row.name).listRowBackground(Color.orange)
                                }
                            }.listRowBackground(Color.orange)
                            .onTapGesture {
                            if row.imageName == "line.horizontal.3"{
                                menuOpened.toggle()
                            }
                        }
                    }
                    .background(Color.red)
                    .listStyle(.plain)
                    .frame(width: menuOpened ? 275 : 80)
                    Spacer()
                    }
                }
            }
        }
    }
}


0 Answers
Related