如何用Visual Format Language正确实现两个按钮的水平与垂直对齐

我来帮你梳理下这个VFL布局的问题～你的核心需求是让两个按钮水平排列，再把这个按钮组整体垂直对齐，但目前出现了容器和按钮位置脱节的情况，主要问题集中在按钮实例的引用错误、容器约束不完整和按钮垂直约束缺失这几点上，下面一步步给你修正：

问题分析 #

1. addButton方法的变量覆盖问题：你在方法里重新赋值了button = new UIButton(...)，但C#参数是值传递，这会导致外部的button1/button2变量和实际添加到容器的按钮实例脱节，虽然你把新按钮加入了views字典，但逻辑上容易混乱。
2. 容器视图约束不完整：你给容器设置了左右边距，但因为关闭了TranslatesAutoresizingMaskIntoConstraints，初始的CGRect完全无效，且容器缺少明确的垂直方向约束（仅靠和questionTextView的间距不够）。
3. 按钮垂直约束缺失：目前只给按钮加了水平排列和顶部对齐的约束，但按钮在容器内的垂直位置没有定义，既无法让按钮在容器内居中，也无法撑开容器的高度。

修正方案 #

1. 修复addButton方法 #

直接在方法内创建按钮并完成配置，避免变量引用混乱：

// 调整方法，直接传入标识、文本和容器，内部创建按钮
public void addButton(NSString buttonIdentifier, string buttonText, UIView containerView)
{
    UIButton button = new UIButton();
    button.TranslatesAutoresizingMaskIntoConstraints = false;
    button.SetTitle(buttonText, UIControlState.Normal);
    button.SetTitleColor(UIColor.Black, UIControlState.Normal);
    button.BackgroundColor = UIColor.LightGray; // 加背景色方便调试
    containerView.AddSubview(button);
    views.Add(buttonIdentifier, button);
}

调用时简化为：

addButton(new NSString("button1"), "按钮1", containerView);
addButton(new NSString("button2"), "按钮2", containerView);

2. 完善容器视图的约束 #

给容器添加完整的水平+垂直约束，确保它在主视图中的位置符合预期：

// 容器水平约束：左右和主视图留边距
var containerHorizontal = NSLayoutConstraint.FromVisualFormat(
    format: "|-[containerView]-|",
    formatOptions: 0,
    metrics: null,
    views: views
);
NSLayoutConstraint.ActivateConstraints(containerHorizontal);

// 容器垂直约束：在questionTextView下方留100间距，底部留50间距，同时水平居中对齐
var containerVertical = NSLayoutConstraint.FromVisualFormat(
    format: "V:[questionTextView]-100-[containerView]-50-|",
    formatOptions: NSLayoutFormatOptions.AlignAllCenterX,
    metrics: null,
    views: views
);
NSLayoutConstraint.ActivateConstraints(containerVertical);

3. 给按钮添加完整的水平+垂直约束 #

让两个按钮在容器内水平均分空间，同时垂直居中于容器：

public void addTwoButtonConstraints()
{
    // 水平约束：两个按钮左右留边距，宽度相等，中间有固定间距
    var buttonHorizontal = NSLayoutConstraint.FromVisualFormat(
        format: "|-[button1(==button2)]-[button2]-|",
        formatOptions: NSLayoutFormatOptions.AlignAllCenterY, // 让两个按钮垂直居中对齐
        metrics: null,
        views: views
    );
    NSLayoutConstraint.ActivateConstraints(buttonHorizontal);

    // 垂直约束：给按钮设置固定高度，撑开容器的高度
    var buttonVertical = NSLayoutConstraint.FromVisualFormat(
        format: "V:[button1(100)]",
        formatOptions: 0,
        metrics: null,
        views: views
    );
    NSLayoutConstraint.ActivateConstraints(buttonVertical);
}

4. 确保所有视图关闭自动约束转换 #

确认questionTextView、containerView和两个按钮都设置了：

view.TranslatesAutoresizingMaskIntoConstraints = false;

这是使用Auto Layout的必要前提。

额外调试小技巧 #

• 给每个视图设置不同的背景色，能直观看到视图的位置和大小；
• 使用Xcode的View Debugger查看约束状态，快速定位约束冲突或缺失的问题。

内容的提问来源于stack exchange，提问作者Tyler Kelly