在 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
来完成这样的布局。
我有用作模态授权对话框的 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
来完成这样的布局。