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()
}
}
}
}
}
}