让我们在 MacOS AppKit 上的 SwiftUI 中使用所有可用宽度的按钮

Posted 2023-02-24

【中文标题】让我们在 MacOS AppKit 上的 SwiftUI 中使用所有可用宽度的按钮

【英文标题】：Let use a button all available width in SwiftUI on MacOS AppKit

【发布时间】：2021-01-04 12:57:14

【问题描述】：

我想定义这样的布局：

当用户调整窗口大小时，如何让按钮获取所有可用宽度。 上部三排等宽，下部一排最大。宽度

struct TEST: View 
  let columns = [
    GridItem(.flexible()),
    GridItem(.flexible()),
    GridItem(.flexible())
  ]
  let data = ["1 Text ...",
              "2 longer Text ...",
              "3 Text ...",
              "4 Text/FA/Tra ...",
              "5 Text ...",
              "6 Text ...",
              "7 Text ...",
              "8 Text ...",
              "9  Text ...",
  ]

  var body: some View 
    VStack (alignment: .leading )
      LazyVGrid(columns: columns) 
        ForEach(data, id: \.self)  item in
          Button(action: print(""))
            Text(item).background(Color.green)
          
          .background(Color.yellow)
        
      
      .padding(.horizontal)
    
    Button("even longer Text")print("x")
    Button("even longer Text")print("x")
    Button("even longer Text")print("x")
  

【问题讨论】：

您可以使用UIScreen.main.bounds.width/height 获取iPhone 的尺寸。也许这也适用于 MacOS。

【参考方案1】：

你可以使用.frame(maxWidth: .infinity):

Button("even longer Text")  
    print("x") 

.frame(maxWidth: .infinity)

---

编辑

这里有一个更详细的例子：

var body: some View 
    VStack(alignment: .leading) 
        LazyVGrid(columns: columns) 
            ForEach(data, id: \.self)  item in
                Button(action:  print("") ) 
                    Text(item)
                        .frame(maxWidth: .infinity)
                        .contentShape(Rectangle())
                
                .background(Color.yellow)
            
        
        .padding(.horizontal)
        .background(Color.blue)
    
    Button(action:  print("x") ) 
        Text("even longer Text")
            .frame(maxWidth: .infinity)
            .contentShape(Rectangle())
    
    .background(Color.purple)
    ...

我添加了颜色，因此您可以看到按钮正确对齐。

使用 Xcode 12.3、macOS 11.1 测试

【讨论】：

对我不起作用。还有什么事情要做吗？

@mica 我添加了一个更详细的背景颜色示例。

非常感谢，现在布局工作正常 - 剩下的一件事：似乎只有 Button 内的一小部分文本是可点击的，这不是 Button 的预期行为。任何想法，如何解决？

@mica 您需要添加.contentShape(Rectangle()) - 查看更新后的答案。

.frame(maxWidth: .infinity) 在 macOS (11.4) 上也不适用于我，按钮会保持其固有大小。 （既不在标签内工作，也不在按钮外工作）。可行的方法是给标签一个 fixed 大小（通过.frame(width: 120)，您可以使用 GeoReader 传入）。我提交了 FB9335111

【参考方案2】：

找到解决办法：

struct TEST: View 

  let columns = [
    GridItem(.flexible()),
    GridItem(.flexible()),
    GridItem(.flexible())
  ]
  let data = ["1 Text ...",
              "2 longer Text ...",
              "3 Text ...",
              "4 Text/FA/Tra",
              "5 Text ...",
              "6 Text ...",
              "7 Text ...",
              "8 Text ...",
              "9  Text ...",
  ]

  var body: some View 
    VStack (alignment: .leading )
      LazyVGrid(columns: columns) 
        ForEach(data, id: \.self)  item in
          ExpandingButton(s: item)print("pressed")
        
      
      .padding(.horizontal)
    
    ExpandingButton(s: "Hogo")print("hogo")
    ExpandingButton(s: "Hogo")print("hogo")
    ExpandingButton(s: "Hogo")print("hogo")

  


struct ExpandingButton: View 
  var s : String
  var action: ()->Void

  var body: some View 
    HStack (alignment: .top)
      Spacer()
      Text(s)
       .padding(4)
      Spacer()
    
    .background(Color.gray)
    .cornerRadius(4)
    .onTapGesture  action()