SwiftUI按钮宽度调整无效：多种方法尝试后仍未解决求助

I get it—you’ve tried all the common tricks like .frame(minWidth: 0, maxWidth: .infinity), adding Spacers, and adjusting padding, but that login button still won’t match your TextField’s width. Let’s break down why this is happening and fix it step by step.

The Root Cause #

Your LoginBtn view is currently a fixed-width element because its internal Text and background don’t have permission to expand to fill available space. Even if you add frames to the outer Button, the inner view won’t stretch unless you explicitly tell it to.

Fixed Code Solution #

First, update your LoginBtn to allow width expansion:

struct LoginBtn: View {
    var body: some View {
        Text("Login")
            .fontWeight(.bold)
            .padding()
            .foregroundColor(Color.white)
            .background(Color.orange)
            .cornerRadius(5.0)
            .frame(maxWidth: .infinity) // Critical: Makes the button fill available width
    }
}

Next, make sure your button is in the same layout context as your TextField—this ensures they share the same width constraints. Wrap both in a VStack that expands to fill the screen width, then add horizontal padding to match your TextField’s margins:

// Assume you have these state variables declared
@State private var username = ""
@State private var isActive = false

var body: some View {
    VStack(spacing: 20) {
        // Your TextField (example structure)
        TextField("Username", text: $username)
            .padding()
            .border(Color.gray)
        
        // Your login button
        Button(action: { isActive = true }) {
            LoginBtn()
        }
        
        // Hidden NavigationLink (cleaner than empty Text)
        NavigationLink(destination: Home(), isActive: $isActive) {
            EmptyView()
        }
        .opacity(0) // Hide without disrupting layout
    }
    .frame(maxWidth: .infinity) // Makes the VStack fill screen width
    .padding(.horizontal, 20) // Aligns with TextField's horizontal padding
}

Why This Works #

• Adding .frame(maxWidth: .infinity) to LoginBtn tells the button’s content to stretch as wide as its parent allows.
• The outer VStack with .frame(maxWidth: .infinity) ensures both the TextField and button have access to the full screen width (minus padding).
• Using EmptyView() instead of an empty Text for the hidden NavigationLink avoids unintended layout interference.

If you’re still seeing issues, double-check that none of the parent views above the VStack are setting fixed widths—any container that restricts width will prevent your button from expanding.

内容的提问来源于stack exchange，提问作者Jeremy McArthur