liveview-native / liveview-client-swiftui

MIT License
379 stars 38 forks source link

Gradient modifier with custom Color fails in client #1304

Closed bcardarella closed 6 months ago

bcardarella commented 7 months ago

I'm trying to implement the .background modifier for a Gradient as taken from the Swift tutorial:

https://developer.apple.com/tutorials/develop-in-swift/design-an-interface#Define-colors-in-the-asset-catalog

let gradientColors: [Color] = [
    .gradientTop,
    .gradientBottom
]

struct ContentView: View {
    var body: some View {
        TabView {
            WelcomePage()
            FeaturesPage()
        }
        .background(Gradient(colors: gradientColors))
        .tabViewStyle(.page)
    }
}

with gradientColors being defined in the Asset Catalog. I've tried to do this instead:

.background(Gradient(colors: [Color(red: 0.1, green: 0.1, blue: 0.1), Color(red: 0.4, green: 0.4, blue: 0.4)]))

I've confirmed this works in SwiftUI:

TabView {
  Group {
    Text("Hello")
  }
  Group {
    Text("Other")
  }
}
.background(Gradient(colors: [Color(red: 0.852, green: 0.646, blue: 0.847), Color(red: 0.954, green: 0.529, blue: 0.385)]))
Screenshot 2024-04-14 at 3 01 36 PM

and it parses OK on the Elixir side:

~RULES"""
background(Gradient(colors: [Color(red: 0.852, green: 0.646, blue: 0.847), Color(red: 0.954, green: 0.529, blue: 0.385)]))
"""
{:background, [],
 [
   {:Gradient, [],
    [
      [
        colors: [
          {:Color, [], [[red: 0.852, green: 0.646, blue: 0.847]]},
          {:Color, [], [[red: 0.954, green: 0.529, blue: 0.385]]}
        ]
      ]
    ]}
 ]}

but it fails in the client:

Stylesheet parsing failed for modifier `background` in class `background(Gradient(colors:[Color(red:0.852,green:0.646,blue:0.847),Color(red:0.954,green:0.529,blue:0.385)]))`:

    |
134 | background(Gradient(colors: [Color(red: 0.852, green: 0.646, blue: 0.847), Color(red: 0.954, green: 0.529, blue: 0.385)]))
    | ^ No matching clause found for modifier `background`. Expected one of `background(alignment:content:)`, `background(ignoresSafeAreaEdges:)`, `background(_:ignoresSafeAreaEdges:)`, `background(in:fillStyle:)`, `background(_:in:fillStyle:)`, `background(in:fillStyle:)`, `background(_:in:fillStyle:)`

in LiveViewNative.SwiftUI.UtilityStyles (utility.ex:134)
carson-katri commented 7 months ago

Try using .linearGradient(...) instead of Gradient. This may require adding a startPoint and endPoint argument.

bcardarella commented 7 months ago

@carson-katri can we support the Gradient as I've outlined it? The AST forms correctly and using the list of Colors is valid in SwiftUI itself.