在滚动视图中使用 2 个垂直堆栈视图，根据内部视图增加高度答案

【问题标题】：use 2 vertical stackviews within scrollview that increase height according to inner views在滚动视图中使用 2 个垂直堆栈视图，根据内部视图增加高度
【发布时间】：2020-04-28 06:01:40
【问题描述】：

我正在尝试创建一个带有滚动视图的屏幕，其中包含各种视图以及两个使用自动布局和约束的垂直堆栈视图，同时以编程方式将项目添加到两个堆栈视图。问题是我不能使两个堆栈视图都与它们中的视图一样大。如果我没有向堆栈视图添加任何高度约束，检查器会给我一个警告，并且并非所有视图都显示在屏幕内。如果我为堆栈视图添加足够的高度，对于高度太大的情况，我会在屏幕上看到空白。如何使堆栈视图的高度与屏幕上的项目匹配，同时确保显示屏幕上的所有其他视图？

我添加了 2 个屏幕截图，第一个屏幕看起来不错时，两个堆栈中都有少量项目，第二个屏幕看起来很好，两个堆栈中都有很多项目，你可以看到我描述的结果

我还在下面链接的屏幕截图中添加了生成结果的代码

sample project

谢谢

【问题讨论】：

标签： ios swift autolayout uistackview

【解决方案1】：

几个选项...

1) 不要给堆栈视图高度约束，并忽略 Storyboard / IB 错误/警告（它只是告诉您布局尚未完成 - 它无法知道您将在运行时满足约束)。

2) 将堆栈视图的高度约束设为 0，并将高度约束的优先级设置为 250 - 这将允许自动布局在需要时增加高度。

3) 给堆栈视图高度限制，但将它们设置为 Placeholders：

这将满足 Storyboard，但不会影响运行时的高度。

编辑

在 cmets、屏幕截图和查看您的项目之后，问题是您的约束不完全正确，导致 scrollView 的 content 没有全部滚动路。

可能有帮助的一些注意事项：

1) 给每个元素一个唯一的名字...更容易思考

“linkTextView作为containerSubView的子视图，是mainSubView的子视图，是mainContentView的子视图”

相对于

"view作为view的子视图，是view的子视图，是view的子视图"

2) 在开发过程中，为您的视图提供对比背景颜色...这样在运行时更容易查看布局框架。

这是如何限制布局的屏幕截图：

这是滚动到底部的输出（我在“item100”之后添加了一个标签，其中包含视图背景颜色的键）：

而且，这里是 Storyboard 的源代码（只需右键单击 Storyboard 文件，选择 Open As -> Source Code，然后将整个内容替换为以下内容）：

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="15505" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
    <device id="retina6_1" orientation="portrait" appearance="light"/>
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15510"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="tne-QT-ifu">
            <objects>
                <viewController id="BYZ-38-t0r" customClass="ViewController" customModule="swiftTraining2" customModuleProvider="target" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
                        <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="haV-jN-E91">
                                <rect key="frame" x="0.0" y="44" width="414" height="818"/>
                                <subviews>
                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="13w-Sm-aLB" userLabel="Main Content View">
                                        <rect key="frame" x="0.0" y="10" width="414" height="818"/>
                                        <subviews>
                                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="Lk9-K2-0eH" userLabel="Top Stack View">
                                                <rect key="frame" x="0.0" y="0.0" width="414" height="200"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="200" placeholder="YES" id="aop-qh-b8I"/>
                                                </constraints>
                                            </stackView>
                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="7od-Vy-8zM" userLabel="Main SubView">
                                                <rect key="frame" x="5" y="205" width="404" height="608"/>
                                                <subviews>
                                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="hw6-MO-6K5" userLabel="Stack Link Container View">
                                                        <rect key="frame" x="5" y="5" width="394" height="598"/>
                                                        <subviews>
                                                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="uku-Xj-j12">
                                                                <rect key="frame" x="5" y="5" width="384" height="563"/>
                                                            </stackView>
                                                            <textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" text="Link" textAlignment="natural" translatesAutoresizingMaskIntoConstraints="NO" id="bct-cc-3xh">
                                                                <rect key="frame" x="5" y="573" width="384" height="20"/>
                                                                <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                                                <constraints>
                                                                    <constraint firstAttribute="height" constant="20" id="uB8-jy-STI"/>
                                                                </constraints>
                                                                <color key="textColor" systemColor="labelColor" cocoaTouchSystemColor="darkTextColor"/>
                                                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                                                <textInputTraits key="textInputTraits" autocapitalizationType="sentences" textContentType="url"/>
                                                            </textView>
                                                        </subviews>
                                                        <color key="backgroundColor" systemColor="systemYellowColor" red="1" green="0.80000000000000004" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                        <constraints>
                                                            <constraint firstItem="uku-Xj-j12" firstAttribute="top" secondItem="hw6-MO-6K5" secondAttribute="top" constant="5" id="9LG-gX-H3R"/>
                                                            <constraint firstItem="uku-Xj-j12" firstAttribute="leading" secondItem="hw6-MO-6K5" secondAttribute="leading" constant="5" id="K42-bH-xHE"/>
                                                            <constraint firstAttribute="trailing" secondItem="uku-Xj-j12" secondAttribute="trailing" constant="5" id="Lap-sB-h8E"/>
                                                            <constraint firstItem="bct-cc-3xh" firstAttribute="top" secondItem="uku-Xj-j12" secondAttribute="bottom" constant="5" id="PdU-Pu-n8y"/>
                                                            <constraint firstItem="bct-cc-3xh" firstAttribute="leading" secondItem="hw6-MO-6K5" secondAttribute="leading" constant="5" id="Xm4-fL-hzr"/>
                                                            <constraint firstAttribute="trailing" secondItem="bct-cc-3xh" secondAttribute="trailing" constant="5" id="hF9-TI-LZN"/>
                                                            <constraint firstAttribute="bottom" secondItem="bct-cc-3xh" secondAttribute="bottom" constant="5" id="kXT-Wg-s1z"/>
                                                        </constraints>
                                                    </view>
                                                </subviews>
                                                <color key="backgroundColor" red="0.45009386540000001" green="0.98132258650000004" blue="0.4743030667" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="trailing" secondItem="hw6-MO-6K5" secondAttribute="trailing" constant="5" id="JG5-Fh-2k6"/>
                                                    <constraint firstItem="hw6-MO-6K5" firstAttribute="leading" secondItem="7od-Vy-8zM" secondAttribute="leading" constant="5" id="ibg-UH-XTf"/>
                                                    <constraint firstItem="hw6-MO-6K5" firstAttribute="top" secondItem="7od-Vy-8zM" secondAttribute="top" constant="5" id="kuH-dl-gXT"/>
                                                    <constraint firstAttribute="bottom" secondItem="hw6-MO-6K5" secondAttribute="bottom" constant="5" id="qHo-jD-cgV"/>
                                                </constraints>
                                            </view>
                                        </subviews>
                                        <color key="backgroundColor" systemColor="systemTealColor" red="0.35294117650000001" green="0.7843137255" blue="0.98039215690000003" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <constraints>
                                            <constraint firstItem="Lk9-K2-0eH" firstAttribute="top" secondItem="13w-Sm-aLB" secondAttribute="top" id="1A1-Yr-m3q"/>
                                            <constraint firstAttribute="trailing" secondItem="7od-Vy-8zM" secondAttribute="trailing" constant="5" id="5rm-XQ-2qJ"/>
                                            <constraint firstItem="Lk9-K2-0eH" firstAttribute="leading" secondItem="13w-Sm-aLB" secondAttribute="leading" id="FGH-Z3-RpE"/>
                                            <constraint firstAttribute="trailing" secondItem="Lk9-K2-0eH" secondAttribute="trailing" id="I6d-e1-OKc"/>
                                            <constraint firstAttribute="bottom" secondItem="7od-Vy-8zM" secondAttribute="bottom" constant="5" id="WXH-MT-LYJ"/>
                                            <constraint firstItem="7od-Vy-8zM" firstAttribute="leading" secondItem="13w-Sm-aLB" secondAttribute="leading" constant="5" id="r68-3o-LzV"/>
                                            <constraint firstItem="7od-Vy-8zM" firstAttribute="top" secondItem="Lk9-K2-0eH" secondAttribute="bottom" constant="5" id="x4w-xp-OAQ"/>
                                        </constraints>
                                    </view>
                                </subviews>
                                <color key="backgroundColor" systemColor="systemRedColor" red="1" green="0.23137254900000001" blue="0.18823529410000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstAttribute="bottom" secondItem="13w-Sm-aLB" secondAttribute="bottom" constant="10" id="3uZ-9Q-Syi"/>
                                    <constraint firstAttribute="trailing" secondItem="13w-Sm-aLB" secondAttribute="trailing" constant="-10" id="7cN-wV-qLW"/>
                                    <constraint firstItem="13w-Sm-aLB" firstAttribute="width" secondItem="haV-jN-E91" secondAttribute="width" id="EEs-NO-GjV"/>
                                    <constraint firstItem="13w-Sm-aLB" firstAttribute="leading" secondItem="haV-jN-E91" secondAttribute="leading" id="hwr-sh-sz8"/>
                                    <constraint firstItem="13w-Sm-aLB" firstAttribute="top" secondItem="haV-jN-E91" secondAttribute="top" constant="10" id="stQ-Nw-f8o"/>
                                    <constraint firstItem="13w-Sm-aLB" firstAttribute="height" secondItem="haV-jN-E91" secondAttribute="height" priority="250" id="xq5-Ng-LZM"/>
                                </constraints>
                                <viewLayoutGuide key="contentLayoutGuide" id="2gK-OB-LB9"/>
                                <viewLayoutGuide key="frameLayoutGuide" id="3NE-oL-tLQ"/>
                            </scrollView>
                        </subviews>
                        <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                        <constraints>
                            <constraint firstItem="haV-jN-E91" firstAttribute="leading" secondItem="6Tk-OE-BBY" secondAttribute="leading" id="BuP-KW-1bP"/>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="trailing" secondItem="haV-jN-E91" secondAttribute="trailing" id="gFi-Mo-tEp"/>
                            <constraint firstItem="haV-jN-E91" firstAttribute="top" secondItem="6Tk-OE-BBY" secondAttribute="top" id="tDm-TP-XSG"/>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="bottom" secondItem="haV-jN-E91" secondAttribute="bottom" id="vd7-z3-iwb"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
                    </view>
                    <connections>
                        <outlet property="linkTextView" destination="bct-cc-3xh" id="Gq2-NM-Hcn"/>
                        <outlet property="stack2" destination="uku-Xj-j12" id="Jkh-gK-WNx"/>
                        <outlet property="stackView" destination="Lk9-K2-0eH" id="AXb-Za-4To"/>
                    </connections>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="131.8840579710145" y="123.88392857142857"/>
        </scene>
    </scenes>
</document>

编辑 2

这个 Storyboard 源代码提供了相同的布局，但没有使用“包含”视图。如您所见，控制器有一个滚动视图，其中仅包含两个堆栈视图和一个文本视图。没有“包含”视图：

故事板来源：

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="16096" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
    <device id="retina4_7" orientation="portrait" appearance="light"/>
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16087"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="tne-QT-ifu">
            <objects>
                <viewController id="BYZ-38-t0r" customClass="ViewController" customModule="swiftTraining2" customModuleProvider="target" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="haV-jN-E91">
                                <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                                <subviews>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="Lk9-K2-0eH" userLabel="Top Stack View">
                                        <rect key="frame" x="0.0" y="8" width="375" height="200"/>
                                        <constraints>
                                            <constraint firstAttribute="height" constant="200" placeholder="YES" id="aop-qh-b8I"/>
                                        </constraints>
                                    </stackView>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="uku-Xj-j12">
                                        <rect key="frame" x="15" y="220" width="345" height="200"/>
                                        <constraints>
                                            <constraint firstAttribute="height" constant="200" placeholder="YES" id="l5I-jk-CSZ"/>
                                        </constraints>
                                    </stackView>
                                    <textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" text="Link" textAlignment="natural" translatesAutoresizingMaskIntoConstraints="NO" id="bct-cc-3xh">
                                        <rect key="frame" x="15" y="428" width="345" height="20"/>
                                        <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                        <constraints>
                                            <constraint firstAttribute="height" constant="20" id="uB8-jy-STI"/>
                                        </constraints>
                                        <color key="textColor" systemColor="labelColor" cocoaTouchSystemColor="darkTextColor"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                        <textInputTraits key="textInputTraits" autocapitalizationType="sentences" textContentType="url"/>
                                    </textView>
                                </subviews>
                                <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstItem="bct-cc-3xh" firstAttribute="top" secondItem="uku-Xj-j12" secondAttribute="bottom" constant="8" id="9m5-Vv-236"/>
                                    <constraint firstItem="Lk9-K2-0eH" firstAttribute="leading" secondItem="2gK-OB-LB9" secondAttribute="leading" id="DTb-E5-Cu5"/>
                                    <constraint firstItem="Lk9-K2-0eH" firstAttribute="trailing" secondItem="2gK-OB-LB9" secondAttribute="trailing" id="O7S-Wk-bj0"/>
                                    <constraint firstItem="2gK-OB-LB9" firstAttribute="trailing" secondItem="bct-cc-3xh" secondAttribute="trailing" constant="15" id="Pmk-yq-TQ8"/>
                                    <constraint firstItem="2gK-OB-LB9" firstAttribute="bottom" secondItem="bct-cc-3xh" secondAttribute="bottom" constant="8" id="RdG-fP-fRO"/>
                                    <constraint firstItem="Lk9-K2-0eH" firstAttribute="width" secondItem="3NE-oL-tLQ" secondAttribute="width" id="YRg-O2-9uu"/>
                                    <constraint firstItem="bct-cc-3xh" firstAttribute="leading" secondItem="2gK-OB-LB9" secondAttribute="leading" constant="15" id="Z1N-f5-SSG"/>
                                    <constraint firstItem="2gK-OB-LB9" firstAttribute="trailing" secondItem="uku-Xj-j12" secondAttribute="trailing" constant="15" id="emJ-tp-a8p"/>
                                    <constraint firstItem="Lk9-K2-0eH" firstAttribute="top" secondItem="2gK-OB-LB9" secondAttribute="top" constant="8" id="hjJ-5I-6rv"/>
                                    <constraint firstItem="uku-Xj-j12" firstAttribute="top" secondItem="Lk9-K2-0eH" secondAttribute="bottom" constant="12" id="pEG-bG-p79"/>
                                    <constraint firstItem="uku-Xj-j12" firstAttribute="leading" secondItem="2gK-OB-LB9" secondAttribute="leading" constant="15" id="tuG-9C-4K1"/>
                                </constraints>
                                <viewLayoutGuide key="contentLayoutGuide" id="2gK-OB-LB9"/>
                                <viewLayoutGuide key="frameLayoutGuide" id="3NE-oL-tLQ"/>
                            </scrollView>
                        </subviews>
                        <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                        <constraints>
                            <constraint firstItem="haV-jN-E91" firstAttribute="leading" secondItem="6Tk-OE-BBY" secondAttribute="leading" id="BuP-KW-1bP"/>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="trailing" secondItem="haV-jN-E91" secondAttribute="trailing" id="gFi-Mo-tEp"/>
                            <constraint firstItem="haV-jN-E91" firstAttribute="top" secondItem="6Tk-OE-BBY" secondAttribute="top" id="tDm-TP-XSG"/>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="bottom" secondItem="haV-jN-E91" secondAttribute="bottom" id="vd7-z3-iwb"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
                    </view>
                    <connections>
                        <outlet property="linkTextView" destination="bct-cc-3xh" id="Gq2-NM-Hcn"/>
                        <outlet property="stack2" destination="uku-Xj-j12" id="Jkh-gK-WNx"/>
                        <outlet property="stackView" destination="Lk9-K2-0eH" id="AXb-Za-4To"/>
                    </connections>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="131.8840579710145" y="123.88392857142857"/>
        </scene>
    </scenes>
</document>

结果，直接来自您的示例项目：

【讨论】：

嗨，DonMag 感谢您的快速回答，我尝试了所有 3 个选项，当我在两个堆栈中有很多项目时，它们都产生了相同的结果 - 第一个堆栈看起来不错，第二个一个显示部分项目和我在屏幕底部的链接不显示。我在原始帖子中添加了 2 个屏幕截图，第一个屏幕看起来不错时在两个堆栈中都有少量项目，第二个在两个堆栈中都有很多项目，你可以看到我描述的结果我还添加了一个链接产生问题的示例项目
@user2679041 - 嗯......我想你需要多描述一下你想要做什么。您的意思是您希望 stackViews 在需要时滚动，但其他元素（例如“站点链接”）在屏幕上保持可见？如果您发布您想要的结果图片与您不喜欢 想要。
嗨@DonMag，我无法让屏幕按我喜欢的方式运行，所以为它附上图片是个问题。我想要的是有 2 个垂直堆栈视图，您可以滚动它们以查看它们的所有元素，此外，我在底部有另一个文本视图，我希望在用户一直向下滚动时显示。我不明白如何集成的要求 - 添加堆栈布局的方式会随着屏幕上使用约束的元素数量而增加，同时在您滚动屏幕时仍显示屏幕中的所有其他元素跨度>
嗨@DonMag，非常感谢您的回答，很抱歉后来的回复，我花了一段时间才回到这个问题，我会在下载后查看您的解决方案解决了这个问题，但是我看到您将第二个堆栈视图放在单独的子视图中，而不是将它们放在相同的内容视图中，您能否解释其背后的逻辑以及在将多个堆栈视图添加到屏幕？
@user2679041 - 我根据示例项目的布局将堆栈视图嵌入到其他视图中。请参阅我的答案底部的 Edit 2 以获得 same 结果，但仅使用两个堆栈视图和直接在滚动中的文本视图查看。