SwiftUI：在 iOS 18 中，列表内的切换不使用全宽

Question

我试图在列表中创建一个占据屏幕整个宽度的视图。 独立视图确实如此。一旦进入列表，它就会占用约 60% 的可用空间。

我已经尝试在列表或视图上使用

.frame(minWidth: .infinity)

，但它不会改变任何东西。我也尝试了各种样式的列表，但没有成功。

struct TodoRow: View {
    @Binding var todo: Todo

    var body: some View {
        Toggle(isOn: $todo.isDone) {
            Text(todo.content ?? "")
        }
        .border(.red)
        .toggleStyle(.switch)
    }
}

struct ContentView: View {
   @State var td1 = Todo(content: "Hello Todo World 20240706T15:23:42.256Z", isDone: false)

    var body: some View {
        
        List {
            TodoRow(todo: $td1)
            TodoRow(todo: $td1)
        }
        .border(.green)
        
        TodoRow(todo: $td1)
            .border(.blue)
    }
}

Answer 1

看起来它正在换行，因为没有足够的空间容纳时间戳。尝试将

lineLimit: 1

应用于

Text

并使其压缩/收缩以适合：

Text(todo.content ?? "")
    .lineLimit(1)
    .allowsTightening(true)
    .minimumScaleFactor(0.5)

Answer 2

这是 iOS 18 中默认

Toggle

样式的更改，它将开关包装在需要的文本下方。

您可以轻松地重新创建旧风格，例如：

struct TodoRow: View {
    @Binding var todo: Todo

    var body: some View {
        HStack { // 👈 Make sure this will be stacked horizontally
            Text(todo.content ?? "") // 👈 Add the leading text in place
                .frame(maxWidth: .infinity, alignment: .leading) // 👈 Make it always fill the space
            Toggle(isOn: $todo.isDone) {
                Text(todo.content ?? "")
            }
            .labelsHidden() // 👈 Hides the default label keeping the accessibility stuff
        }
        .toggleStyle(.switch)
    }
}