在 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",};
      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，反之亦然。

解决方法

NSStackView 使用自动布局系统。所以可能不应该使用 sizetofit 之类的东西。查看按钮上的 Contenthuggingpriority 和 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",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 来完成这样的布局。 this article on web.dev