Swift List row background color not changing

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 days trying to set the background color of the menu items. As it stands listRowBackground does nothing. I have read on stack overflow (and other websites) how to solve this issue, but none of them seem to work. Some say to use for each loops. Below I have SideMenu structs. The first one uses the listRowBackGround method to try to change the color. This method does not do anything. The other SideMenu struct uses a for each loop. This loop changes the color, but I cannot get the menu to move to the left hand side of the screen and not take up the entire width.

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! 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()
                    }
                }
            }
        }
    }
}
Post not yet marked as solved Up vote post of jcrowson12 Down vote post of jcrowson12
877 views

Replies

.listRowBackground only works in a ForEach.

@SpaceMan. Thank you, but I cannot figure out how to format the menu so that the menu is on the left hand side and does not take up the entire width when using the for each loop.