时间戳

首页 > 解决方案 > 在 SwiftUI 中使 VStack 填充屏幕的宽度

ios - 在 SwiftUI 中使 VStack 填充屏幕的宽度

问题描述

鉴于此代码：

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack(alignment: .leading) {
      Text("Title")
        .font(.title)

      Text("Content")
        .lineLimit(nil)
        .font(.body)

      Spacer()
    }
    .background(Color.red)
  }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}
#endif

结果是这个界面：

预览

VStack即使标签/文本组件不需要全宽，我如何才能填充屏幕的宽度？

我发现的一个技巧是在结构中插入一个空 HStack，如下所示：

VStack(alignment: .leading) {
  HStack {
    Spacer()
  }
  Text("Title")
    .font(.title)

  Text("Content")
    .lineLimit(nil)
    .font(.body)

  Spacer()
}

这会产生所需的设计：

期望的输出

有没有更好的办法？

标签： iosswiftxcodeswiftui

解决方案

尝试使用.frame带有以下选项的修饰符：

.frame(
      minWidth: 0,
      maxWidth: .infinity,
      minHeight: 0,
      maxHeight: .infinity,
      alignment: .topLeading
    )

struct ContentView: View {
  var body: some View {
    VStack(alignment: .leading) {
      Text("Hello World")
        .font(.title)
      Text("Another")
        .font(.body)
      Spacer()
    }
    .frame(
      minWidth: 0,
      maxWidth: .infinity,
      minHeight: 0,
      maxHeight: .infinity,
      alignment: .topLeading
    )
    .background(Color.red)
  }
}

这被描述为一个灵活的框架（请参阅文档），它将拉伸以填满整个屏幕，并且当它有额外的空间时，它会将其内容居中放置在其中。

推荐阅读