UITableViewCell内部视图约束未即时更新，仅滚动表格后生效的问题解决咨询

I see the issue you're facing: when you update the tagsHeight constraint to match the FlexLayout container's height, the change doesn't take effect immediately—only after the cell is reused via scrolling. Let's break down why this happens and fix it step by step.

Why Your Current Code Isn't Working #

When you modify tagsHeight.constant, you're changing a constraint but haven't told the cell (or the table view) to recompute its layout right away. Additionally, layoutSubviews runs at a later stage (when the cell's frame changes), so your constraint update gets delayed until the next layout pass—usually triggered by cell reuse during scrolling.

Step-by-Step Fixes #

1. Trigger Immediate Layout After Updating Constraints

After setting tagsHeight.constant, you need to force the cell and its subviews to update their layout immediately. We'll also move the FlexLayout height calculation to a more appropriate place—right after you configure the tags in setSetupStoreUI, instead of relying on layoutSubviews.

2. Enable Automatic Row Heights in Your Table View

If your table view uses fixed heights, it won't automatically adjust when the cell's content height changes. Add this setup code to your table view controller or wherever you initialize the table view:

// Configure dynamic row heights
tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 150 // Use a reasonable estimate based on your cell's default size

3. Optimize FlexLayout Calculation & Constraint Update

Modify your setSetupStoreUI method to calculate the FlexLayout height immediately after configuring the tags, then trigger a layout update:

func setSetupStoreUI() {
    // ... keep all your existing configuration code here ...

    // Configure FlexLayout container
    rootFlexContainer.subviews.forEach({ $0.removeFromSuperview() })
    rootFlexContainer.flex.direction(.row).wrap(.wrap).alignSelf(.auto).justifyContent(.start).paddingRight(2).define { (flex) in
        // ... your tag button configuration code remains unchanged ...
    }

    // Calculate FlexLayout height immediately
    let availableWidth = frame.width - 20 // Match your original width calculation
    rootFlexContainer.frame.size.width = availableWidth
    rootFlexContainer.flex.layout(mode: .adjustHeight)

    // Update constraint and toggle visibility
    let newHeight = rootFlexContainer.frame.height
    tagsHeight.constant = newHeight != 0 ? newHeight : 0
    tagsView.isHidden = (retailerTags?.count ?? 0 == 0) && cashbackString.isEmpty

    // Force immediate layout update
    self.setNeedsLayout()
    self.layoutIfNeeded()

    // Notify table view to adjust this cell's height
    if let tableView = self.superview as? UITableView {
        tableView.beginUpdates()
        tableView.endUpdates()
    }
}

4. Simplify layoutSubviews

Now that we handle layout calculation in setSetupStoreUI, we can reduce layoutSubviews to only adjust the Flex container width if the cell's frame changes:

override func layoutSubviews() {
    super.layoutSubviews()
    let availableWidth = frame.width - 20
    if rootFlexContainer.frame.width != availableWidth {
        rootFlexContainer.frame.size.width = availableWidth
        rootFlexContainer.flex.layout(mode: .adjustHeight)
        tagsHeight.constant = rootFlexContainer.frame.height
        self.layoutIfNeeded()
    }
}

5. Reset State for Cell Reuse

Add prepareForReuse to clear leftover state from previous cells, preventing layout glitches:

override func prepareForReuse() {
    super.prepareForReuse()
    tagsHeight.constant = 0
    tagsView.isHidden = true
    rootFlexContainer.subviews.forEach({ $0.removeFromSuperview() })
    // Reset other reusable properties
    retailerTags = nil
    cashbackString = ""
    storeImgStr = ""
    storeTitleStr = ""
    storeLocationStr = ""
    score = 0.0
    isMenuAvailble = 0
}

Key Takeaways #

• layoutIfNeeded(): Forces the view to immediately update its layout based on the latest constraints—always call this after modifying constraint constants.
• Automatic Row Heights: The table view needs explicit permission to calculate heights dynamically, which automaticDimension and estimatedRowHeight provide.
• Timing: Calculating the FlexLayout height right after configuring tags ensures the constraint is updated before the cell is displayed, eliminating the scroll-to-update delay.

This should make your tag view height update instantly when the cell is configured, no scrolling required.

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