SwiftUI Button() .frame()

struct ContentView: View {

@State private var newSetState = true

var body: some View {

VStack {

if self.newSetState || !self.newSetState {

HStack {

Text( ...

Text( ...

}.font(.largeTitle).lineLimit(1).fixedSize()

HStack {

Text( ...

Text( ...

Text( ...

}.font(.largeTitle).lineLimit(1).fixedSize()

Button("emoji", action: { self.newSetState.toggle() } )

.font(.largeTitle)

.frame(width: 36, height: 86, alignment: .center)

}

} .padding([.top, .leading, .trailing])

.frame(width: 280, height: 280, alignment: .center)

}

}


I'm guessing my previous post was kicked because of the emoji symbol.


The issue remains: Button() does not respond to the frame() method, as all my other views do. Indeed, if I create a Text() view, .font(.largeTitle) is sufficient to "grow" the view. The VStack{} responds to .frame() adjustments.


The result of the above code produces the emoji in .largeTitle format but its top is cropped even though it is well inside the frame. The shadowed button behind it is shorter and wider and itself only accepts taps. That is to say, the copped emoji extends above the button in its background but is cropped well below the frame bounds.


I am currently attempting to code a substitute Button() of my own until Apple can correct this. ;-)

Replies

if self.newSetState || !self.newSetState {


Why this always true condition ? To force a refresh when self.newSetState changes ?


I tested the following:

struct ContentView: View {
    @State private var newSetState = true
    var body: some View {
         VStack {
            if self.newSetState || !self.newSetState {
                HStack {
                    Text("Hello 1!")
                    Text("Hello 2!")
               }.font(.largeTitle).lineLimit(1).fixedSize()
          Spacer()
                HStack {
                    Text("Hello 3!")
                    Text("Hello 4!")
                    Text("Hello 5!")
                }.font(.largeTitle).lineLimit(1).fixedSize()
         
                Button("", action: { self.newSetState.toggle() } )
                    .font(.largeTitle)
                    .frame(width: 36, height: 86, alignment: .center)
            }
        }   .padding([.top, .leading, .trailing])
            .frame(width: 280, height: 280, alignment: .center)
    }
}



Changing button frame height from 86 to 286 does make the button appear lower, reflecting the new frame.


You said:

The result of the above code produces the emoji in .largeTitle format but its top is cropped even though it is well inside the frame.

I do not observe any cropping


The shadowed button behind it is shorter and wider and itself only accepts taps.

Where is the shadowed button in your code ?


That is to say, the copped emoji extends above the button in its background but is cropped well below the frame bounds.

Only thing I observe is that button reacts only on a limited height, not the full 286 of frame height.

Yes, to refresh with every tap.


If yours is not cropped, I'm stunned. I wish I could post a .png of it (worth a thousand words).


I solved my problem by making my own button in a new file declaring:


struct TempButton: View {

var body: some View {

HStack {

Text("\u{1F504}")

}

}

}


then replacing Button() in ContentView{}...


TempButton()

.onTapGesture {

self.newSetState.toggle()

}.font(.largeTitle).padding()


And it looks and works well.


Was I correct that my previous post was removed because it had an emoji symbol in it?

I posted with an emoji, it was not removed.


But the emiji disappeared in the formatted line:

                Button("", action: { self.newSetState.toggle() } )

Should have been

Button("🙂", action: { self.newSetState.toggle() } )


Where was the shadow for the button ?

Just read this: (very helpful)

https://forums.developer.apple.com/thread/97547


...so yes, probably kicked for emoji symbol.


To Claude31:

"Where is the shadowed button in your code ?"

the "shadowed button" I see in preview and in running code IS the Button(), Apples Button(), with the emoji as the label for it. I say shadow because while in Preferences:Fonts&Colors:Theme:Default(Dark), the Button() shows as a slightly darker grey than the background, and the emoji overlays it.


"Only thing I observe is that button reacts only on a limited height, not the full 286 of frame height."

That's why I set the emoji's frame to 86 high because the emoji is square and less than 40, i.e., .largeTitle. My preview frame, the blue rectangle, shows that the emoji has plenty of room to grow above its cropped level.


Maybe Apple is contemplating depricating Button() because it is so easy to make ones own. In any case, I'm running.


Thanks. :-)

Ah... moved under App Frameworks. I was wondering if I was posting in the right forum.(newbie)


Thanks!


Actually since creating my own Button(), i.e., not using Apples', I'm running.


I don't know how to close this discussion, nor indeed, if it should be closed.


Ummm... just to clarify though. Are you able to use, in any code, Apples Button("🔄", action: {print("emoji trial")}).font(.largeTitle) and have it not be cropped?

I have tried to do so in various views and they are all cropped. I've tried in a separate project that has no other methods compounding, and this emoji is still cropped.


You've had me thinking... so I tried .font(.largeTitle) on existing Button()'s throughout my projects, and it crops. Appending .frame() is inconsequential.

After further investigation, .frame() may not be to blame;-) , but .font(.largeTitle) that fails.


Create your own button as shown above if you need .font(.largeTitle)