垂直 UIStackView 对齐

Question

我有一个垂直的 UIStackview，里面有 3 个控件。我希望所有控件都居中，前两个控件可以扩展整个可用宽度。第三个应该占可用宽度的 80% 并且也居中。

这是我目前得到的结果：

如您所见，第三个控件左对齐。

这是我所有这些的代码：

    var container = new UIStackView
    {
        TranslatesAutoresizingMaskIntoConstraints = false,
        Axis = UILayoutConstraintAxis.Vertical,
        Distribution = UIStackViewDistribution.EqualCentering,
        Alignment = UIStackViewAlignment.Fill,
        Spacing = 10f
    };
    // Create the Title
    UILabel title = new UILabel
    {
        TranslatesAutoresizingMaskIntoConstraints = false,
        Text = item.name,
        TextAlignment = UITextAlignment.Center,
        Lines = 2,
    };
    
    container.AddArrangedSubview(title);
    
    // Create the gauge
    SFCircularGauge circularGauge = new SFCircularGauge { TranslatesAutoresizingMaskIntoConstraints = false };
    circularGauge.Tag = circularGauge.GenerateViewTag();
    circularGauge.HeightAnchor.ConstraintEqualTo(100f).Active = true;
#if DEBUG
    circularGauge.BackgroundColor = UIColor.Cyan;
#endif    
    container.AddArrangedSubview(circularGauge);
    
    // Add the evaluate button
    var evaluate = UIButton.FromType(UIButtonType.RoundedRect);
    evaluate.TranslatesAutoresizingMaskIntoConstraints = false;
    
    evaluate.SetTitle(Utilities.GetLocalizedString("qol_rate_button_text"), UIControlState.Normal);
    evaluate.SetTitleColor(UIColor.White, UIControlState.Normal);
    evaluate.BackgroundColor = new UIColor(red: 1.00f, green: 0.37f, blue: 0.00f, alpha: 1.0f); // Optimistic Orange
    evaluate.Layer.CornerRadius = 5f;
    evaluate.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
    evaluate.ContentEdgeInsets = new UIEdgeInsets(top: 0, left: 10f, bottom: 0, right: 10f);
    
    evaluate.UserInteractionEnabled = true;
    
    evaluate.TouchUpInside -= Evaluate_TouchUpInside;
    evaluate.TouchUpInside += Evaluate_TouchUpInside;
    
    evaluate.Tag = evaluate.GenerateViewTag();
    viewIdsAutoEvalsIds.Add((int)evaluate.Tag, item.id);
    
    container.AddArrangedSubview(evaluate);
    
    evaluate.WidthAnchor.ConstraintEqualTo(container.WidthAnchor, 0.8f).Active = true;
    evaluate.CenterXAnchor.ConstraintEqualTo(container.CenterXAnchor).Active = true;

我不知道我的问题在哪里。在 UIStackView 配置中？其他地方？

提前致谢。

Answer 1

属性 Alignment是设置非轴向子视图的对齐方式。在您的情况下，您需要将其设置为

UIStackViewAlignment.Center

而不是

UIStackViewAlignment.Fill

Answer 2

这可能是控件的错误。我们将 see.

与此同时，再次感谢显示工具，仪表没有定义宽度。

我通过显式设置宽度约束解决了这个问题：

// Fix the width to be 100% of the container     
circularGauge.WidthAnchor.ConstraintEqualTo(container.WidthAnchor).Active = true;

垂直 UIStackView 对齐

Vertical UIStackView alignment

xamarin.ios

ios