在 NSStackView 中对齐控件答案

【问题标题】：Align control inside NSStackView在 NSStackView 中对齐控件
【发布时间】：2020-12-29 12:52:38
【问题描述】：

我有用作模式授权对话框的 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 的布局。看起来像这样：

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

【问题讨论】：

标签： appkit xamarin.mac nsstackview

【解决方案1】：

NSStackView 使用自动布局系统。所以像 sizetofit 这样的东西可能不应该被使用。查看按钮上的 Contenthuggingpriority 和 contentcompressionpriority 以及 stackview 上的分布以了解大小。

替换

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

有

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

现在自己无法测试，可能还需要其他修改。

【讨论】：

【解决方案2】：

没有办法自定义 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 来完成这样的布局。

【讨论】：