web-dev-qa-db-ja.com

SwiftUIでリストの背景色を変更するにはどうすればよいですか？

SwiftUIでUIKitを使用して作成したUIを再作成しようとしていますが、いくつかの小さな問題が発生しています。

ここでListの色を変更したいのですが、期待どおりに機能するプロパティがないようです。以下のサンプルコード：

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

swiftswiftui
24
andromedainiative

わかりました、リストの行に色を付けるための解決策を見つけました：

struct TestRow: View {

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

そして体の中に：

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

これは期待どおりに機能しますが、行間の分割線を削除する方法はまだわかりません...

20
Marius Waldal

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)
        }
    }
}
10
Steve Ham

UITableViewの外観を変更することでそれを行うことができます。

UITableView.appearance().backgroundColor = UIColor.clear

この行をAppdelegateのdidFinishLaunchingWithOptionsメソッドに挿入するだけです。 UIColor.clearの代わりに、listの背景色に追加する色を設定します。

8
Vishal Patel

接続が何かはわかりませんが、リストをFormでラップすると機能します。

Form {
     List(viewModel.currencyList, id: \.self) { currency in
        ItemView(item: currency)
     }
      .listRowBackground(Color(UIColor(named: "Primary")!))
      .background(Color(UIColor(named: "Primary")!))
}
6
Mustafa Ozhan

ColorMultiply（Color :)を使用して、リスト全体の色を変更することができました。この修飾子をリストビューの最後に追加するだけで、パディングによってテーブルがデバイスの端にプッシュされます。例えば：

List {...}.colorMultiply(Color.green).padding(.top)

https://www.hackingwithswift.com/quick-start/swiftui/how-to-adjust-views-by-tinting-and-desaturating-and-more

5
Jake Strickler

これにより、リスト全体の背景が緑色に設定されます。

init() {
   UITableView.appearance().separatorStyle = .none
   UITableViewCell.appearance().backgroundColor = .green
   UITableView.appearance().backgroundColor = .green
}
3
Mahmoud ELDesouky

私は listRowPlatterColor 修飾子がこれを行うべきだと思いますが、Xcode 11 Beta 11M336w以降ではありません

var body: some View {
    List(pokemon) { pokemon in
        PokemonCell(pokemon: pokemon)
            .listRowPlatterColor(.green)
    }
}
3
Emma K Alexandra

.listRowBackgroundを使用して.paddingを適用し、SwiftUIを使用して浮動型セルを作成しようとすると、誰かがこれを役立つと感じる場合があります。

var body: some View {
    NavigationView {
        List {
            ForEach (site) { item in
                HStack {
                    Text(String(item.id))

                    VStack(alignment: .leading) {
                        Text(item.name)
                        Text(item.crop[0])
                    }

                }.listRowBackground(Color.yellow)
                      .padding(.trailing, 5)
                      .padding(.leading, 5)
                      .padding(.top, 2)
                      .padding(.bottom, 2))
            }
        }
            .navigationBarTitle(Text("Locations"))
    }
}
2
caleb81389

私にとって、SwiftUIでリストの背景を変更するための完璧なソリューションは次のとおりです。

struct SomeView: View {
    init(){
    UITableView.appearance().backgroundColor = UIColor(named: "backgroundLight")
      }
...

}
1
Islom Alimov

ページごとのNavigationViewナビゲーションバースタイルを構成し、ページごとの簡単なUITableViewを作成するためのいくつかのコンフィギュレーターにインスピレーションを与えました。

   import SwiftUI

    struct TableViewConfigurator: UIViewControllerRepresentable {

        var configure: (UITableView) -> Void = { _ in }

        func makeUIViewController(context: UIViewControllerRepresentableContext<TableViewConfigurator>) -> UIViewController {

            UIViewController()
        }

        func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<TableViewConfigurator>) {

            let tableViews = uiViewController.navigationController?.topViewController?.view.subviews(ofType: UITableView.self) ?? [UITableView]()

            for tableView in tableViews {
                self.configure(tableView)
            }
        }
    }

次に、すべてのUITableViewを見つけるために必要なUIView拡張機能があります

extension UIView {
    func subviews<T:UIView>(ofType WhatType:T.Type) -> [T] {
        var result = self.subviews.compactMap {$0 as? T}
        for sub in self.subviews {
            result.append(contentsOf: sub.subviews(ofType:WhatType))
        }
        return result
    }
}

そして最後の使い方は：

List {

}.background(TableViewConfigurator {
    $0.backgroundColor = .red
})

たぶん、navigationController？.topViewControllerを使用して、View Controller階層にnavigationControllerがなくても機能するように、改善すべきことがあります。

0
Michał Ziobro