代码之家  ›  专栏  ›  技术社区  ›  Clifton Labrum

SwiftUI:框中多行文本视图的不同宽度

  •  0
  • Clifton Labrum  · 技术社区  · 5 年前

    下面是两个文本框在SwiftUI中的呈现方式,但我希望它们都是全宽的:

    enter image description here

    这是我的密码:

    VStack(spacing: 20){
      //Help ---
      VStack(alignment: .leading, spacing:10){
        Text("Help").h2()
        Text("Please view our online user guide before contacting us since we answer most questions there.")
          .lineLimit(nil) //Make the text wrap
          .prefsText()
        
        Button("Online Help"){
          openURL(URL(string: "https://avid.pro/help")!)
        }.foregroundColor(Color(accentColor))
        .buttonStyle(PlainButtonStyle())
        .prefsLink()
        
      }.unoBoxRoundPad()
      .frame(maxWidth: .infinity)
      
      //Support ---
      VStack(alignment: .leading, spacing:10){
        Text("Support").h2()
        Text("Email us if you need to submit a bug or get specialized help. It may take us a few days to get back to you.")
          .lineLimit(nil) //Make the text wrap
          .prefsText()
      
        Button("Email Us"){
          openURL(URL(string: "mailto:help@avid.pro")!)
        }.foregroundColor(Color(accentColor))
        .buttonStyle(PlainButtonStyle())
        .prefsLink()
        
      }.unoBoxRoundPad()
      .frame(maxWidth: .infinity)
    
    }.background(Color.yellow) //For testing
    

    我一辈子都搞不懂为什么它们的宽度不一样。 .unoBoxRoundPad() 是添加以下共享样式的视图修改器:

    .padding(20)
    .background(Color("UnoDark"))
    .cornerRadius(7)
    

    如果我把 .frame(maxWidth: .infinity) Text() 而不是在桌子上 VStack ,它看起来更接近了一点,但是它忽略了包含视图的 padding() :

    enter image description here

    你知道我做错了什么吗?

    1 回复  |  直到 5 年前
        1
  •  3
  •   Dave DeLong    5 年前

    这里有两个问题:

    1. 你换了两个修饰语( .frame(...) .unoBoxRoundPad() );您希望将圆度应用于整个拉伸对象。把 .roundpad() 首先,你说的是“垫这个东西”,然后是“把那个圆形的东西放在一个无限宽的盒子里”;你想要的是相反的:你的东西应该放在一个无限宽的盒子里,这个无限宽的盒子应该有圆角和填充。

    2. 您需要指定一个 alignment: 使用时 .frame() 修改器;当内部视图放置在无限宽的框中时,它将默认为在其内部垂直和水平居中。根据你的截图,你可能想用 .topLeading 使内容(“支持”、“帮助”等)从左上角开始(或在RTL语言中从右上角开始)。