You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让VerticalStackLayout实现StackLayout的子控件AndExpand效果?

VerticalStackLayout怎么实现StackLayout的AndExpand垂直展开效果?

问题根源

VerticalStackLayout虽然是StackLayout的高性能替代,但它的布局逻辑是全新重构的,完全不支持StartAndExpand这类带AndExpand后缀的布局选项。这些带Expand的选项是旧StackLayout独有的布局逻辑,VerticalStackLayout采用了更高效的约束布局模型,默认只会按子控件自身的固有大小排列,不会自动分配容器的剩余空间。

解决办法

要达到和原StackLayout中AndExpand相同的均分剩余空间效果,有两种实用方案:

方案1:用Grid替代(最推荐)

Grid的行定义使用*可以自动均分可用空间,完美匹配原StackLayout的展开效果:

<Grid BackgroundColor="Yellow">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <BoxView BackgroundColor="White" Grid.Row="0" />
    <BoxView BackgroundColor="Red" Grid.Row="1" />
</Grid>

方案2:结合Fill布局选项使用VerticalStackLayout

如果坚持使用VerticalStackLayout,需要给子控件设置VerticalOptions="Fill",同时确保VerticalStackLayout本身占据父容器的全部可用空间(给它也设置VerticalOptions="Fill")。但这种方式下子控件会直接填充整个VerticalStackLayout空间,若要均分需手动控制高度,不如Grid方案简洁:

<VerticalStackLayout BackgroundColor="Yellow" VerticalOptions="Fill">
    <BoxView BackgroundColor="White" VerticalOptions="Fill" />
    <BoxView BackgroundColor="Red" VerticalOptions="Fill" />
</VerticalStackLayout>

注:此写法中两个BoxView会重叠填满整个布局,若要实现均分高度,需手动给每个BoxView设置相同的HeightRequest,或通过绑定动态计算。

补充说明

VerticalStackLayout的设计目标是高性能线性排列子控件,复杂的空间分配逻辑,MAUI官方更推荐使用Grid或FlexLayout实现,这是新布局体系的设计导向。

内容的提问来源于stack exchange,提问作者Miroslav

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.08 06:01:06