Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I modify the background color of a List in SwiftUI?

Tags:

swift

swiftui

I'm trying to recreate an UI I built with UIKit in SwiftUI but I'm running into some minor issues.

I want the change the color of the List here, but no property seems to work as I expects. Sample code below:

struct ListView: View {
    @EnvironmentObject var listData: ListData

       var body: some View {
        NavigationView {
            List(listData.items) { item in
                ListItemCell(item: item)
            }
            .content.background(Color.yellow) // not sure what content is defined as here
            .background(Image("paper-3")) // this is the entire screen 
        }
    }
}

struct ListItemCell: View {
    let item: ListItem

    var body: some View {

        NavigationButton(destination: Text(item.name)) {
            Text("\(item.name) ........................................................................................................................................................................................................")
                .background(Color.red) // not the area I'm looking for
        }.background(Color.blue) // also not the area I'm looking for
    }
}

I want to change the WHITE area

like image 529
andromedainiative Avatar asked Jun 09 '19 19:06

andromedainiative


People also ask

How do I add custom background color in SwiftUI?

To add a screen background view by putting it at the bottom of the ZStack. Text("Hello, SwiftUI!") <1> Use ZStack so we can place a background view under the content view. <2> Use color view as background.

How do I change the background in SwiftUI?

SwiftUI doesn't have a dedicated modifier for displaying background colors or images, but instead lets us specify any kind of background view using its background() modifier. To be clear, you can use any view as your background – another text view if you wanted, for example.

How do I use custom colors in SwiftUI?

Search for the assets folder in your project, once inside you'll see everything that's added to the folder such as images, your app icon, etc. You need to create a new color by right-clicking anywhere in the list to open a menu, just click Color Set and you name the color however you want.


4 Answers

Ok, I found the solution for coloring the list rows:

struct TestRow: View {

    var body: some View {
        Text("This is a row!")
        .listRowBackground(Color.green)
    }
}

and then in body:

List {
    TestRow()
    TestRow()
    TestRow()
}

This works as I expect, but I have yet to find out how to then remove the dividing lines between the rows...

like image 129
Marius Waldal Avatar answered Oct 19 '22 18:10

Marius Waldal


This will set the background of the whole list to green:

init() {
   UITableView.appearance().separatorStyle = .none
   UITableViewCell.appearance().backgroundColor = .green
   UITableView.appearance().backgroundColor = .green
}
like image 25
Mahmoud Eldesouky Avatar answered Oct 19 '22 17:10

Mahmoud Eldesouky


enter image description here

struct ContentView: View {

    var strings = ["a", "b"]

    var body: some View {

        List {
            ForEach(strings, id: \.self) { string in
                Text(string)
            }.listRowBackground(Color.green)
        }
    }
}
like image 44
Steve Ham Avatar answered Oct 19 '22 18:10

Steve Ham


You can do it by changing UITableView's appearance.

UITableView.appearance().backgroundColor = UIColor.clear

just put this line in Appdelegate's didFinishLaunchingWithOptions method. In replace of UIColor.clear set whatever color you want to add in background color of list.

like image 33
Vishal Patel Avatar answered Oct 19 '22 18:10

Vishal Patel