When I add shadow on a view that contains a button then the button will no longer be clickable. The same code on iOS works as expected, but on tvOS it breaks the button. Am I doing something wrong here? Is there a workaround?
Here is my code,
VStack {
Button(action: {
print("Button clicked") // This is never called
}) {
Text("test")
}
.padding()
}
.background(Color.red)
.shadow(color: Color.black, radius: 14, x: 0, y: 4)
I found a workaround for this issue, since backgrounds can be set to any view you can apply all the styling you need to the background, and it won't break the buttons within the view.
.background(RoundedRectangle(cornerRadius: 8)
.fill(Color.red)
.shadow(color: Color.black, radius: 14, x: 0, y: 4))
Related
I think I don't quite understand how components and entities work.
I'm using the box component that appears in the a-frame help (https://aframe.io/docs/1.3.0/introduction/writing-a-component.html#example-box-component), and I want to modify a property. When doing so, I thought that the update would be activated but it does nothing. In fact the oldData is always empty and never enters in the update option (except for the first time):
<script>
AFRAME.registerComponent("box", {
...
}
</script>
<a-scene> </a-scene>
<script>
const gScene = document.querySelector("a-scene");
var camara = document.querySelector("[camera]");
camara.setAttribute("position", { x: 0, y: 0, z: 10 });
var p00 = document.createElement("a-entity");
p00.setAttribute("box", { width: 1, height: 1, depth: 1, color: "#f00" });
gScene.appendChild(p00);
p00.setAttribute("height", 3);
p00.setAttribute("color", "#00f");
</script>
First part of the code plot a red box with 1x1x1 dimension. But when I change the height or color attribute, don't do anything. What I have to do to fire the update?
Thanks in advance
You need to update the box attribute - setAttribute("height", XXX) will trigger an update in the height component.
If color is in the box schema, then:
// this updates the color property of the box attribute,
// triggering "update" in the "box" component
p00.setAttribute("box", "color", "red")
// this update the height attribute,
// triggering "update" in the "height" component
p00.setAttribute("height", "10");
I am using a menu and the view I have for the main button has text inside it which can change. It's between 4 and 6 characters.
When the text changes, the button animates left and right and the text animates in (which is not what I want) ..
I'd ideally like to use a buttonStyle but this doesn't seem possible.
Any ideas how I can keep the button static ? The right button is a "real" button which behaves.
Menu {
if fuelTypeisAvailable(fuelType: "Gazole") {
Button {
updateStuff()
Haptics.shared.play(.light)
preferredFuelType = "Gazole"
} label: {
Label("Gazole €\(closestGazole ?? "")", systemImage: isPreferedFuelType(type: "Gazole"))
}
}
etc
label: {
// This is the left blue button
Text("\(preferredFuelType)")
.padding(25)
.font(.system(size: 20, weight: .light, design: .default))
.foregroundColor(.primary)
.background(
Circle()
.fill(.blue).opacity(leftButtonIsHidden ? 0 : 0.8)
)
}
Here is a working version that fixes the animation issues. It even accepts the buttonStyle.
label: {
// This is the left blue button
ZStack{
Circle().fill(.blue).opacity(0.8)
Text("\(preferredFuelType)")
.font(.system(size: 22, weight: .light, design: .default))
.foregroundColor(.primary)
.animation(nil)
}.frame(width: 80, height: 80)
}
.buttonStyle(TwitterButtonStyle())
public var body: some View
{
ZStack{
GeometryReader { geometry in
RoundedRectangle(cornerRadius: 25, style: .continuous)
.frame(width: geometry.size.width*1.00, height: geometry.size.height*1.00)
.zIndex(0)
}
}
}
I'm using GeometryReader to draw a rounded rectangle to fill up the entire watch screen, this looks fine on a 38mm watch simulator, but as I increase the watch size to 40, 42, 44mm I noticed that the height is not filling up the whole screen. I have to adjust my multiple to say 1.1 for example to fill up more of the screen.
Can someone tell me if I am using GeometryReader incorrectly?
Unless you really need the full functionality of the geometry reader, to actually measure the size of the object of the screen, then I think you could achieve the effect you want by setting the frame's maxWidth and maxHeight to .infinity and by ignoring the safe area on the bottom.
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 25, style: .continuous)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.edgesIgnoringSafeArea(.bottom)
}
}
Note that when you use a ZStack the order of the items in it determine the order on the screen. The first item in the stack will be at the bottom, and then each item will be layered on top.
image inside the button appears blue. I cant figure out how to fix it.
Button(action: {self.count += 1}) {
Circle()
.fill(LinearGradient(gradient: Gradient(colors: [Color("linkAccount1"), Color("linkAccount2")]), startPoint: UnitPoint(x: 0, y: 0.2), endPoint: UnitPoint(x: 1, y: 1)))
.frame(width: 80, height: 80)
.shadow(color: Color("shadowColor1"), radius: 7, y: 7)
.overlay(
//issue with image backgroud or foregroundColor
Image("linkAccount")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 60, height: 60))
}
Solution:
Image("linkAcount").renderingMode(.original)
As per my comment above, the issue is caused by the rendering mode of the Image.
You can overcome the tinting problem by using the .renderingMode() modifier, and setting the mode to be .original. This tells the image to ignore the tint.
Image("linkAcount").renderingMode(.original)
Images and Text contained within a button get rendred in accent colour, which by default is blue, just apply:
.accentColor(.white)
to your Button to have the image drawn in white.
we use the highchart control with Angular and bootstrap.
To adjust the vertical space between the chart and the legend (both are rendered by highchart as svg elements), we set the y property of the legend on page load (in the controller) like this:
$scope.chartContracts = {
options: {
chart: {
type: 'pie',
marginBottom: 50
},
legend : {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 4,
Now in one of the Bootstraps layouts, the spacing (y) should be -10 in stead of 4 because for some reason an extra spacing is added.
So it should be based on media query or something similar I guess?
The question is how to do this... I tried with css but I can't seem to style SVG elements (they are called <g>)?
You can check window width and then return correct value.
var wWidth = $(window).width(),
value;
if(wWidth < 400) {
value = 5;
} else {
value = 10;
}
//scope
y: value