如何使用mvvmcross fluentLayout修改约束 [英] How to modify a constraint using mvvmcross fluentLayout

问题描述

我形象地把这根头发拔了出来.我从这篇文章中阅读了" http://gregshackles.com/fluentlayout-2-5/"，FluentLayout现在支持约束条件的编辑/删除，但对我而言似乎不起作用.我的场景是在单击按钮时切换UIView中文本字段的可见性.

I've figuratively pulled my hair out on this one. I read from this article "http://gregshackles.com/fluentlayout-2-5/" that FluentLayout now supports constraint editing/removing but it doesn't seem to work on my end. My scenario is to toggle the visibility of a textfield within a UIView when a button is clicked.

我尝试了以下方法.

A.修改高度限制

 var height = isVisible ? textfield.Height().EqualTo(0) : textfield.WithSameHeight(textfieldContainer).Multiplier(1 / 3);
            textfieldContainer.Add(textfield);
            textfieldContainer.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
            textfieldContainer.AddConstraints(
                    textfield.WithSameLeft(textfieldContainer).Plus(12),
                    textfield.WithSameTop(textfieldContainer).Plus(24),
                    textfield.WithSameWidth(textfieldContainer),
                    height
                );

B.使用SetActive(false)-绝望地尝试了这一点

 textfieldContainer.Add(textfield);
            textfieldContainer.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
            textfieldContainer.AddConstraints(
                    textfield.WithSameLeft(textfieldContainer).Plus(12).SetActive(!isVisible),
                    textfield.WithSameTop(textfieldContainer).Plus(24).SetActive(!isVisible),
                    textfield.WithSameWidth(textfieldContainer).SetActive(!isVisible),
                    textfield.WithSameHeight(textfieldContainer).WithMultiplier(1 / 4).SetActive(!isVisible)
                );

预期结果

根据可见性，文本字段应该可见

The textfield should be visible depending on the visibility

实际结果

文本字段的高度从不改变，因此始终可见

The textfield's height never changes, thus it is always visible

推荐答案

我的猜测是，您的height变量在页面生命周期内仅设置了一次，此后不再更改.实现您所需的一种方法如下:

My guess is that your height variable is set once during the page lifecycle, and does not get change after that point. A way of achieving what you need is the following:

首先，将按钮单击绑定到更改ViewModel上boolean状态的命令，以便在单击按钮时更改boolean的值:

Firstly, bind your button click to a command that changes the state of a boolean on your ViewModel, so that the boolean's value changes when the button is clicked:

bindingSet.Bind(yourButton).To(vm => vm.YourCommand);

MvxCommand _yourCommand;
public MvxCommand YourCommand
    => _yourCommand ?? _yourCommand = new MvxCommand(ReverseMyBool);

void ReverseMyBool()
{
    YourBoolean = !YourBoolean;
}

如有必要，请在构造ViewModel时将YourBoolean设置为true，这取决于您是否希望在页面加载期间隐藏字段.现在，ViewModel属性对UITextField是否应隐藏具有正确的true/false状态，将Hidden的UITextField自身绑定到布尔值(您可能需要使用

If necessary, set YourBoolean to true during the construction of your ViewModel, depending on whether your want the field to be hidden during page load. Now that the ViewModel property holds an accurate true/false state for whether your UITextField should be hidden, bind the UITextField itself for Hidden to the boolean (you may need to use a value converter to reverse the value - if Hidden is true, the view is invisible):

bindingSet.Bind(textfield).For(c => c.Hidden).To(vm => vm.YourBoolean);

接下来，创建与两种情况(您的视图可见和隐藏)相关的FluentLayout变量，并同时应用它们:

Next, create FluentLayout variables that relate to both situations (your view being visible and being hidden), and apply both of them:

var textFieldWithOneThirdContainerHeight = textfield.WithSameHeight(textFieldContainer).WithMultiplier(1f /3f);
var textFieldWithZeroHeight = textField.Height().EqualTo(0f);

textfieldContainer.AddConstraints(textFieldWithOneThirdContainerHeight, textFieldWithZeroHeight, /*other constraints here*/);

最后，将Active的约束绑定到ViewModel上的boolean-请注意，将需要使用转换器将其反转:

And finally, bind the constraints for Active to the boolean on your ViewModel - note that one will need to be reversed with a converter:

bindingSet.Bind(textFieldWithOneThirdContainerHeight).For(c => c.Active).To(vm => vm.YourBoolean).WithConversion(new ReverseBooleanValueConverter());
bindingSet.Bind(textFieldWithZeroHeight).For(c => c.Active).To(vm => vm.YourBoolean);

ReverseBooleanValueConverter看起来像这样:

public class ReverseBooleanValueConverter: MvxValueConverter<bool, bool>
{
    protected override bool Convert(bool value, Type targetType, object parameter, CultureInfo culture) 
        => !value;
}

当YourBoolean为true时，您的UITextField应该是不可见的，并且高度应为0f.如果YourBoolean为false，则它应该是可见的，并且高度应为容器高度的三分之一.

When YourBoolean is true, your UITextField should be invisible, and should have a height of 0f. When YourBoolean is false, it should be visible, and should have one third the height of it's container.

这篇关于如何使用mvvmcross fluentLayout修改约束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！