I wanna dynamic to modify the flexgrow, its behavior is not expected #708

New Issue

2018-02-04T22:56:04-08:00

karosLi commented

2018-02-04 22:56:04 -08:00

(Migrated from github.com)

Report

I have searched existing issues and this is not a duplicate

Issues and Steps to Reproduce

In the example project, I wanna dynamic to modify flexgrow, but found that the red view will reduce its width when each I tapped the button. This is strange.

Expected Behavior

Should not reduce the red view's width each time.

Actual Behavior

Reduced the red view's width each time.

Link to Code

#import "ViewController.h"
#import <YogaKit/YGLayout.h>
#import <YogaKit/UIView+Yoga.h>

@interface ViewController ()

@property (nonatomic, strong) UIButton *button;
@property (nonatomic, strong) UIView *redView;
@property (nonatomic, strong) UIView *disappearingView;
@property (nonatomic, strong) UIView *contentView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor whiteColor];
    [self.view configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
        layout.isEnabled = YES;
        layout.flexDirection = YGFlexDirectionColumn;
        layout.alignItems = YGJustifySpaceBetween;
    }];
    
    self.contentView = [UIView new];
    self.contentView.backgroundColor = [UIColor clearColor];
    self.contentView.layer.borderColor = [UIColor lightGrayColor].CGColor;
    self.contentView.layer.borderWidth = 1.0;
    [self.contentView configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
        layout.isEnabled = YES;
        layout.width = YGPointValue(self.view.bounds.size.width);
        layout.height = YGPointValue(300);
        layout.flexDirection = YGFlexDirectionRow;
        layout.justifyContent = YGJustifyCenter;
        layout.paddingHorizontal = YGPointValue(25);
    }];
    [self.view addSubview:self.contentView];
    
    UIView *redView = [UIView new];
    redView.backgroundColor = [UIColor redColor];
    [redView configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
        layout.isEnabled = YES;
        layout.flexGrow = 1;
        layout.flexShrink = 1;
    }];
    [self.contentView addSubview:redView];
    self.redView = redView;
    
    self.disappearingView = [UIView new];
    self.disappearingView.backgroundColor = [UIColor blueColor];
    [self.disappearingView configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
        layout.isEnabled = YES;
        layout.flexGrow = 1;
//        layout.width = YGPercentValue(40);
//        layout.flexShrink = 1;
    }];
    [self.contentView addSubview:self.disappearingView];
    
    self.button = [UIButton buttonWithType:UIButtonTypeCustom];
    self.button.backgroundColor = [UIColor grayColor];
    [self.button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [self.button setTitleColor:[UIColor blackColor] forState:UIControlStateSelected];
    [self.button setTitle:@"Add Blue View" forState:UIControlStateSelected];
    [self.button setTitle:@"Remove Blue View" forState:UIControlStateNormal];
    [self.button addTarget:self action:@selector(buttonWasTapped) forControlEvents:UIControlEventTouchUpInside];
    [self.button configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
        layout.isEnabled = YES;
        layout.flexGrow = 1;
        layout.height = YGPointValue(300);
        layout.width = YGPointValue(300);
        layout.alignSelf = YGAlignCenter;
    }];
    [self.view addSubview:self.button];
    
    [self.view.yoga applyLayoutPreservingOrigin:NO];
}

- (void)buttonWasTapped {
    self.button.selected = !self.button.selected;
    self.button.userInteractionEnabled = NO;
    
    self.disappearingView.yoga.isIncludedInLayout = !self.disappearingView.yoga.isIncludedInLayout;
    self.button.yoga.width = self.disappearingView.alpha == 1.0 ? YGPointValue(100) : YGPointValue(300);
    self.disappearingView.alpha = 1.0 - self.disappearingView.alpha;
    
    if (self.disappearingView.alpha == 1.0) {
        self.disappearingView.yoga.flexGrow = 1;
    } else {
        self.disappearingView.yoga.flexGrow = 0;
    }
    
    [UIView animateWithDuration:0.3 animations:^{
        [self.view.yoga applyLayoutPreservingOrigin:YES];
    }];
    
    self.button.userInteractionEnabled = YES;
}

@end

# Report - [x] I have searched [existing issues](https://github.com/facebook/yoga/issues) and this is not a duplicate # Issues and Steps to Reproduce In the example project, I wanna dynamic to modify flexgrow, but found that the red view will reduce its width when each I tapped the button. This is strange. # Expected Behavior Should not reduce the red view's width each time. # Actual Behavior Reduced the red view's width each time. # Link to Code ``` #import "ViewController.h" #import <YogaKit/YGLayout.h> #import <YogaKit/UIView+Yoga.h> @interface ViewController () @property (nonatomic, strong) UIButton *button; @property (nonatomic, strong) UIView *redView; @property (nonatomic, strong) UIView *disappearingView; @property (nonatomic, strong) UIView *contentView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; [self.view configureLayoutWithBlock:^(YGLayout * _Nonnull layout) { layout.isEnabled = YES; layout.flexDirection = YGFlexDirectionColumn; layout.alignItems = YGJustifySpaceBetween; }]; self.contentView = [UIView new]; self.contentView.backgroundColor = [UIColor clearColor]; self.contentView.layer.borderColor = [UIColor lightGrayColor].CGColor; self.contentView.layer.borderWidth = 1.0; [self.contentView configureLayoutWithBlock:^(YGLayout * _Nonnull layout) { layout.isEnabled = YES; layout.width = YGPointValue(self.view.bounds.size.width); layout.height = YGPointValue(300); layout.flexDirection = YGFlexDirectionRow; layout.justifyContent = YGJustifyCenter; layout.paddingHorizontal = YGPointValue(25); }]; [self.view addSubview:self.contentView]; UIView *redView = [UIView new]; redView.backgroundColor = [UIColor redColor]; [redView configureLayoutWithBlock:^(YGLayout * _Nonnull layout) { layout.isEnabled = YES; layout.flexGrow = 1; layout.flexShrink = 1; }]; [self.contentView addSubview:redView]; self.redView = redView; self.disappearingView = [UIView new]; self.disappearingView.backgroundColor = [UIColor blueColor]; [self.disappearingView configureLayoutWithBlock:^(YGLayout * _Nonnull layout) { layout.isEnabled = YES; layout.flexGrow = 1; // layout.width = YGPercentValue(40); // layout.flexShrink = 1; }]; [self.contentView addSubview:self.disappearingView]; self.button = [UIButton buttonWithType:UIButtonTypeCustom]; self.button.backgroundColor = [UIColor grayColor]; [self.button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [self.button setTitleColor:[UIColor blackColor] forState:UIControlStateSelected]; [self.button setTitle:@"Add Blue View" forState:UIControlStateSelected]; [self.button setTitle:@"Remove Blue View" forState:UIControlStateNormal]; [self.button addTarget:self action:@selector(buttonWasTapped) forControlEvents:UIControlEventTouchUpInside]; [self.button configureLayoutWithBlock:^(YGLayout * _Nonnull layout) { layout.isEnabled = YES; layout.flexGrow = 1; layout.height = YGPointValue(300); layout.width = YGPointValue(300); layout.alignSelf = YGAlignCenter; }]; [self.view addSubview:self.button]; [self.view.yoga applyLayoutPreservingOrigin:NO]; } - (void)buttonWasTapped { self.button.selected = !self.button.selected; self.button.userInteractionEnabled = NO; self.disappearingView.yoga.isIncludedInLayout = !self.disappearingView.yoga.isIncludedInLayout; self.button.yoga.width = self.disappearingView.alpha == 1.0 ? YGPointValue(100) : YGPointValue(300); self.disappearingView.alpha = 1.0 - self.disappearingView.alpha; if (self.disappearingView.alpha == 1.0) { self.disappearingView.yoga.flexGrow = 1; } else { self.disappearingView.yoga.flexGrow = 0; } [UIView animateWithDuration:0.3 animations:^{ [self.view.yoga applyLayoutPreservingOrigin:YES]; }]; self.button.userInteractionEnabled = YES; } @end ```

NickGerleman commented

2023-06-13 08:05:49 -07:00

(Migrated from github.com)

We are deprecating YogaKit as part of the Yoga 2.0 release. We are still going to release a new revision based on the current state of the repo, but won't be accepting new contributions, since we are going to be removing it from the repo after.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#708