在 NSStackView 中对齐控件

Align control inside NSStackView

我有用作模态授权对话框的 NSWindows 实现。代码:

using System;
using AppKit;
using Cairo;

namespace SomeNameSpace
{
  public class DialogWindow : NSWindow
  {
    public DialogWindow() : base()
    {
      var stackView = new NSStackView(){
        AutoresizingMask = NSViewResizingMask.HeightSizable | NSViewResizingMask.WidthSizable,
      };
      stackView.WantsLayer = true;
      stackView.Layer.BackgroundColor = new CoreGraphics.CGColor(255f, 0f, 0f);
      stackView.Alignment = NSLayoutAttribute.Leading;
      stackView.Orientation = NSUserInterfaceLayoutOrientation.Vertical;
      ContentView = stackView; 
      SetFrame(new CoreGraphics.CGRect(Frame.Location, new CoreGraphics.CGSize(300, 210)), true);
      StyleMask |= NSWindowStyle.Closable;
    }

    public void ShowDialog()
    {
      NSApplication.SharedApplication.RunModalForWindow(this);
    }
  }

 public class AuthDialog : DialogWindow
  {
    public AuthDialog() : base()
    {
      var usernameLabel = new NSTextField() {
        StringValue = "Username",
        Editable = false,
        DrawsBackground = false,
        Selectable = false,
        Bezeled = false,
      };
      usernameLabel.SizeToFit();
      var usernameEditor = new NSTextField();
      var passwordLabel = new NSTextField() {
        StringValue = "Password",
        Editable = false,
        DrawsBackground = false,
        Selectable = false,
        Bezeled = false,
      };
      passwordLabel.SizeToFit();
      var passwordEditor = new NSSecureTextField();
      var actionButtonsView = new NSStackView() {
        Orientation = NSUserInterfaceLayoutOrientation.Horizontal,
      };
      actionButtonsView.WantsLayer = true;
      actionButtonsView.Layer.BackgroundColor = new CoreGraphics.CGColor(0f, 255f, 0f);
      var cancelButton = new NSButton() {
        Title = "Cancel",
      };
      var loginButton = new NSButton() {
        Title = "Login",
      };
      actionButtonsView.TranslatesAutoresizingMaskIntoConstraints = false;
      actionButtonsView.AddArrangedSubview(cancelButton);
      actionButtonsView.AddArrangedSubview(loginButton);
      loginButton.SizeToFit();
      var stackView = (NSStackView)ContentView;
      stackView.AddArrangedSubview(usernameLabel);
      stackView.AddArrangedSubview(usernameEditor);
      stackView.AddArrangedSubview(passwordLabel);
      stackView.AddArrangedSubview(passwordEditor);
      stackView.AddArrangedSubview(actionButtonsView);
      ShowsResizeIndicator = false;
    }
  }
}

它只是创建基于 NSStackView 的布局。看起来像这样:

问题是如何将最后一个子视图(包含按钮)对齐到父视图(和 window)的右侧?编程语言无关紧要。它很容易翻译成 swift\obj-c,反之亦然。

NSStackView 使用自动布局系统。所以可能不应该使用像 sizetofit 这样的东西。查看按钮上的 Contenhuggingpriority 和 contentcompressionpriority 以及堆栈视图上的分布以调整大小。

替换

actionButtonsView.AddArrangedSubview(cancelButton);
actionButtonsView.AddArrangedSubview(loginButton);

actionButtonsView.AddView(cancelButton, NSStackViewGravity.Trailing);
actionButtonsView.AddView(loginButton, NSStackViewGravity.Trailing);

目前无法自行测试,可能还需要其他修改。

无法通过自定义 NSStackView 本身来实现此目的,每个视图要么前导、尾随或居中。

但是,您可以向包含按钮的水平堆栈视图添加约束,并将其固定到封闭的垂直堆栈视图的尾部:

let cancelButton = NSButton(title: "Cancel", target: nil, action: nil)
let loginButton = NSButton(title: "Login", target: nil, action: nil)

// Set content hugging high enough so that the vertical stack view won't
// stretch the buttons in an effort to align them along the leading edge
cancelButton.setContentHuggingPriority(.defaultHigh, for: .horizontal)
loginButton.setContentHuggingPriority(.defaultHigh, for: .horizontal)

// The horizontal stack view's distribution needs to be fill
let horizontalStackView = NSStackView(views: [cancelButton, loginButton])
horizontalStackView.distribution = .fill

stackView.addArrangedSubview(horizontalStackView)

// Pins the buttons to the right (trailing) edge of the vertical stack view
NSLayoutConstraint.activate([
    horizontalStackView.trailingAnchor.constraint(equalTo: stackView.trailingAnchor)
])

或者,您可能想尝试 NSGridView 来完成这样的布局。