Why are my SwiftUI Links not respecting frame maxWidth?

Question

I am trying to make a list of buttons/links that all have the same width, regardless of text content. Unfortunately, it seems like the Link() items do not respect the .frame(maxWidth) settings and just do whatever they want. I cannot find any resources online that describe how to do this, so I am turning here to see if anyone can help me determine the best way to line these up to be the same width.

My code below:

VStack(alignment: .center) {
                Button {
                    bypass.toggle()
                } label: {
                    Text("Push to Bypass")
                    .frame(maxWidth: .infinity)
                }
                .font(.title2)
                .fontWeight(.bold)
                .buttonStyle(.borderedProminent)
                .foregroundColor(Color(hue: 1.0, saturation: 1.0, brightness: 1.0, opacity: 0.825))
                .tint(Color(red: 0.005, green: 0.669, blue: 0.791))
                Link("Settings", destination: URL(string: "http://192.168.10.1/TSettings")!)
                    .frame(maxWidth: .infinity)
                    .font(.title2)
                    .fontWeight(.bold)
                    .buttonStyle(.borderedProminent)
                    .foregroundColor(.white)
                    .tint(Color(red: 0.005, green: 0.669, blue: 0.791))
                Link("Recorder Settings", destination: URL(string: "http://192.168.10.1/VB")!)
                    .frame(maxWidth: .infinity)
                    .font(.title2)
                    .fontWeight(.bold)
                    .buttonStyle(.borderedProminent)
                    .foregroundColor(.white)
                    .tint(Color(red: 0.005, green: 0.669, blue: 0.791))
                Link("Download Data", destination: URL(string: "http://192.168.10.1/ddownload")!)
                    .frame(maxWidth: .infinity)
                    .font(.title2)
                    .fontWeight(.bold)
                    .buttonStyle(.borderedProminent)
                    .foregroundColor(.white)
                    .tint(Color(red: 0.005, green: 0.669, blue: 0.791))
                Link("Download Audio", destination: URL(string: "http://192.168.10.1/generate")!)
                    .frame(maxWidth: .infinity)
                    .font(.title2)
                    .fontWeight(.bold)
                    .buttonStyle(.borderedProminent)
                    .foregroundColor(.white)
                    .tint(Color(red: 0.005, green: 0.669, blue: 0.791))
            }.fixedSize(horizontal: true, vertical: false)

What it currently looks like:

This is expected behavior. [`maxWidth`](https://developer.apple.com/documentation/swiftui/view/frame(minwidth:idealwidth:maxwidth:minheight:idealheight:maxheight:alignment:)) just defines the maximum width that your frame is allowed to expand to, not the size that it must expand to. In fact, you would want to use `minWidth` if you wanted everything to expand to a minimum size. I reccomend seeing this article on SwiftUI layout: https://www.hackingwithswift.com/articles/217/complete-guide-to-layout-in-swiftui. — , Feb 15 '23 at 17:29

viedev · Accepted Answer · 2023-02-15T16:42:04.873

0

Add this to your struct:

@Environment(\.openURL) var openURL

Use a regular button and apply the desired modifiers:

Button {
    openURL(URL(string: "http://192.168.10.1/TSettings")!)
} label: {
    Text("Settings")
        .frame(maxWidth: .infinity)
}

edited Feb 15 '23 at 16:42

answered Feb 15 '23 at 16:34

viedev

869
1
6
16

score 0 · Answer 2 · answered Feb 15 '23 at 21:56

Get rid of .fixedSize(horizontal: true, vertical: false) at the end and use Link with label: init:

            Link(destination: URL(string: "http://192.168.10.1/TSettings")!) {
                Text("Settings")
                    .frame(maxWidth: .infinity)
            }
            .font(.title2)
            .fontWeight(.bold)
            .buttonStyle(.borderedProminent)
            .foregroundColor(.white)
            .tint(Color(red: 0.005, green: 0.669, blue: 0.791))

Why are my SwiftUI Links not respecting frame maxWidth?

2 Answers2