如何使进度指示器响应

Question

我参考Sample - Progress Indicator在水平布局中制作了3个进度指示器（以垂直布局完成），如下所示：

<l:HorizontalLayout
        class="sapUiContentPadding"
        width="100%">
        <l:content>
            <ProgressIndicator
                class="sapUiSmallMarginBottom"
                percentValue="30"
                displayValue="30%"
                showValue="true"
                width="28.7rem"
                state="None" />
            <ProgressIndicator
                class="sapUiSmallMarginBottom"
                percentValue="50"
                showValue="false"
                width="28.7rem"
                state="Error" />
            <ProgressIndicator
                class="sapUiSmallMarginBottom"
                percentValue="99"
                displayValue="0.99GB of 1GB"
                showValue="true"
                width="28.7rem"
                state="Success" />
        </l:content>
    </l:HorizontalLayout>

为了使屏幕适合等大小的3个指示器，我使用了width="28.7rem"，但这可能不是正确的方法，并且也不响应（已知）

结果图像：

为了使其具有响应性，我已阅读将整个内容包装在flex框中，所以我尝试了：]

<l:content>
         <Panel class="sapUiDemoFlexBoxSizeAdjustments">
            <FlexBox
                alignItems="Start">
                    <items>
            <ProgressIndicator
                class="sapUiSmallMarginBottom"
                percentValue="30"
                displayValue="30%"
                showValue="true"
                width="100%"
                state="None" />
            <ProgressIndicator
                class="sapUiSmallMarginBottom"
                percentValue="50"
                showValue="false"
                width="100%"
                state="Error" />
            <ProgressIndicator
                class="sapUiSmallMarginBottom"
                percentValue="99"
                displayValue="0.99GB of 1GB"
                showValue="true"
                width="100%"
                state="Success" />
                    </items>
            </FlexBox>
          </Panel>
        </l:content>
    </l:HorizontalLayout>
但这也无济于事（我想我的代码是错误的，我可以知道如何实现这些响应式进度指示器吗？ TIA

我已经在水平布局中制作了3个进度指示器，参考示例-进度指示器（在垂直布局中完成），如下所示：

Answer 1

根据您的要求，可以使用GRID布局来实现它。