Question

我几乎可以肯定有一个简单的解决方案，但是在使用UIKit几年之后，对我来说不是很明显。

实际上，有一个带有七个按钮的日历可以切换星期几。我在按钮之间使用了恒定的填充值，但是我需要将视图的框架分为七个相等的部分，每个按钮一个。，以使布局适合于不同的屏幕尺寸。在框架布局中，这是一项非常简单的任务，但是我无法猜测如何使用SwiftUI正确地做到这一点。 Spacer()在这种情况下看起来不太好。

一些图片可以说明发生了什么： what I want， what I have。

谢谢！

struct WeekCalendarView: View {

    @ObservedObject var selectedDay: ObservableDate

    private var days: [Date] {
        return selectedDay.date.currentWeek
    }

    var body: some View {
        HStack {
            ForEach(days, id: \.self) { day in
                Button(action: {
                    self.selectedDay.date = day
                }) {
                    VStack {
                        Text(day.date)
                            .fontWeight(.semibold)
                            .foregroundColor(day == self.selectedDay.date ? Color.white : Color.black)
                            .padding(14)
                            .background(day == self.selectedDay.date ? Color.green : Color.clear)
                            .clipShape(Circle())
                            .padding(.vertical, 6)

                        Text(day.dayOfTheWeek)
                            .fontWeight(.light)
                            .font(.caption)

                    }
                }
                .buttonStyle(PlainButtonStyle())
            }
        }
    }
}

Answer 1

这是复制模型上自动平台无关布局（不带填充）的演示。

使用Xcode 12 / iOS 14准备并测试了演示

struct WeekCalendarView: View {

    private var days = [23, 24, 25, 26, 27, 28, 29]
    private var dayOfTheWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sut"]

    @State private var selectedDay = 24

    var body: some View {
        HStack {
            ForEach(0..<days.count, id: \.self) { day in
                Button(action: {
                    self.selectedDay = days[day]
                }) {
                    VStack {
                        Circle()
                            .fill(days[day] == self.selectedDay ? Color.green : Color.clear)
                            .aspectRatio(contentMode: .fit)
                            .overlay(
                                Text("\(days[day])")
                                    .fontWeight(.semibold).fixedSize()
                                    .foregroundColor(days[day] == self.selectedDay ? Color.white : Color.black)
                            )
                            .padding(.vertical, 6)
                            .frame(maxWidth: .infinity)

                        Text(dayOfTheWeek[day])
                            .fontWeight(.light)
                            .font(.caption)
                    }
                }
                .buttonStyle(PlainButtonStyle())
            }
        }
    }
}

Answer 2

Roland没有测试他的解决方案，因此其中存在一些错误，这是基于Rolands答案的经过测试的解决方案：

更改：HStack中的间距必须设置为0，否则结果仍然很丑。还有一个小的类型“ with” ...

struct ContentView: View {
    
    var days = [
        Day(date: "9", dayOfTheWeek: "Su"),
        Day(date: "10", dayOfTheWeek: "Mo"),
        Day(date: "11", dayOfTheWeek: "Tu"),
        Day(date: "12", dayOfTheWeek: "We"),
        Day(date: "13", dayOfTheWeek: "Th"),
        Day(date: "14", dayOfTheWeek: "Fr"),
        Day(date: "15", dayOfTheWeek: "Sa")

        ]
    
    @State var selectedDay : Day = Day(date: "10", dayOfTheWeek: "Mo")
    
    var body: some View {
        HStack(spacing:0) {
            ForEach(days, id: \.self) { day in
                Button(action: {
                    self.selectedDay = day
                }) {
                    VStack {
                        Text(day.date)
                            .fontWeight(.semibold)
                            .foregroundColor(day == self.selectedDay ? Color.white : Color.black)
                            .padding(14)
                            .background(day == self.selectedDay ? Color.green : Color.clear)
                            .clipShape(Circle())
                            .padding(.vertical, 6)
                        
                        Text(day.dayOfTheWeek)
                            .fontWeight(.light)
                            .font(.caption)
                        
                    }
                   .frame(width: screen.size.width / 7) // This is where I would use the screen size.

                }
                .buttonStyle(PlainButtonStyle())
            }
        }
    }
}

自动计算填充以使用SwiftUI填充整个视图的框架

2 个答案: