有没有办法修复 swiftUI 中的按钮宽度？

Question

我尝试修复swiftUI中的按钮宽度，但是宽度是指向.frame(width: )还是固定.fixedSize(horizontal: true, vertical: false)修饰符中，或两者兼而有之，它仍然不起作用。该按钮只是根据其内容长度缩小或扩展。我该如何解决？

\n

请看下面的代码和图片：

\n

struct ContentView: View {\n    var body: some View {\n        let days = [0, 1, 2, 3, 4]\n        \n        let dayWeatherList = ["Sunday, Sunny",\n                                  "Monday, Sunny",\n                                  "Tuesday, Sunny",\n                                  "Wednesday, Sunny",\n                                  "Thursday, Sunny"]\n        \n        let aqiList = [aqiItem(aqi: 6, color: .green),\n                               aqiItem(aqi: 123, color: .orange),\n                               aqiItem(aqi: 25, color: .green),\n                               aqiItem(aqi: 345, color: .red),\n                               aqiItem(aqi: 56, color: .yellow)]\n        \n        VStack {\n            ForEach(days, id: \\.self) { index in\n                let dayWeatherInfo = dayWeatherList[index]\n                let aqiForecast = aqiList[index]\n                ForecastDayView(dayWeatherInfo: dayWeatherInfo, aqiForecast: aqiForecast)\n            }\n        }\n        .padding(24)\n\n    }\n}\n\nstruct ContentView_Previews: PreviewProvider {\n    static var previews: some View {\n        ContentView()\n    }\n}\n\nstruct aqiItem {\n    let aqi: Int\n    let color: Color\n}\n\nstruct ForecastDayView: View {\n    let dayWeatherInfo: String\n    let aqiForecast: aqiItem\n    \n    var body: some View {\n        let fontSize: CGFloat = 14\n        \n        HStack(alignment: .center) {\n            Text(dayWeatherInfo)\n                .font(.system(size: fontSize))\n                .fontWeight(.semibold)\n                .foregroundColor(.black)\n            \n            Spacer()\n            \n            Text("24/32\xc2\xb0")\n                .font(.system(size: fontSize))\n                .fontWeight(.semibold)\n                .foregroundColor(.black)\n            \n            Spacer()\n            \n            HStack(spacing: 16) {\n                if let aqiForecast = aqiForecast {\n                    let aqi = aqiForecast.aqi\n                    let color = aqiForecast.color\n                    \n                    Button(action: {}, label: {\n                        Text("\\(aqi)")\n                            .foregroundColor(.white)\n                            .padding(EdgeInsets(top: 2, leading: 4, bottom: 2, trailing: 4))\n                    })\n                    .font(.system(size: 13))\n                    .background(color)\n                    .cornerRadius(4)\n                    .frame(width:40)\n                    .fixedSize(horizontal: true, vertical: false)\n                }\n                \n                let length: CGFloat = 18\n                \n                Image("100")\n                    .resizable()\n                    .frame(width: length, height: length)\n                \n                Image("101")\n                    .resizable()\n                    .frame(width: length, height: length)\n            }\n            \n        }\n    }\n    \n}\n

\n

按钮具有不同的宽度:\n

\n

首先十分感谢！

\n

Answer 1

.background您在设置宽度之前申请。如果您先应用.frame(width: 40)然后设置背景颜色，您将看到所有内容都具有相同的大小。

Button(action: {}, label: {
    Text("\(aqi)")
        .foregroundColor(.white)
        .padding(EdgeInsets(top: 2, leading: 4, bottom: 2, trailing: 4))
})
.frame(width:40)
.font(.system(size: 13))
.background(color)
.cornerRadius(4)