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

如何实现列表项下拉建议覆盖下方控件的重复Entry布局?

问题

需要创建可重复加载N次的Entry字段列表,每个条目包含文本输入框与评论输入区域。当前输入文本时,预定义的文本建议列表会推挤下方控件,而非覆盖它们。尝试过AbsoluteLayout的多种LayoutFlags和LayoutBounds组合仍未解决,每个文本输入对应的建议列表长度不同,寻求解决方案或合适的替代布局方式。

解决方案

方法1:修正AbsoluteLayout参数(快速解决)

你当前的AbsoluteLayout配置会让建议列表占据实际布局空间,导致推挤。调整以下关键设置:

  • 将AbsoluteLayout的VerticalOptions设为Start,避免它自动扩展高度
  • 给建议列表设置LayoutFlags="WidthProportional",让宽度适配父容器,高度自适应内容
  • LayoutBounds设为0,65,1,AutoSize,固定Y轴位置,不撑开父布局

修改后的核心代码片段:

<AbsoluteLayout VerticalOptions="Start" HorizontalOptions="FillAndExpand">
    <!-- 输入框区域,占据整个AbsoluteLayout空间 -->
    <Grid Margin="0" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
        <!-- 原有Label和Entry Frame -->
    </Grid>
    <!-- 建议列表,覆盖在下方,不影响布局流 -->
    <StackLayout BindableLayout.ItemsSource="{Binding SuggestedText}" 
                 BindableLayout.EmptyView="No Suggestions"
                 x:Name="SuggestedTextView" 
                 Orientation="Vertical" 
                 IsVisible="{Binding IsVisible}"
                 BackgroundColor="White" 
                 AbsoluteLayout.LayoutFlags="WidthProportional"
                 AbsoluteLayout.LayoutBounds="0,65,1,AutoSize">
        <!-- 原有建议项模板 -->
    </StackLayout>
</AbsoluteLayout>

方法2:使用Popup控件(更灵活)

如果AbsoluteLayout方式仍有局限,建议将建议列表放在Popup中,完全脱离当前布局流,彻底解决推挤问题:

  • 给Entry绑定TextChanged事件,触发Popup显示
  • Popup内容为建议列表,位置定位在Entry下方
  • 选择建议后关闭Popup,将选中值填入Entry

这种方式不受父布局限制,适配不同长度的建议列表更友好。

方法3:用RelativeLayout替代AbsoluteLayout

RelativeLayout可精准控制控件相对位置,避免布局推挤:

<RelativeLayout HorizontalOptions="FillAndExpand" VerticalOptions="Start">
    <!-- 输入框区域,固定高度 -->
    <Grid x:Name="InputGrid" 
          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
          RelativeLayout.HeightConstraint="{ConstraintExpression Type=Constant, Constant=80}">
        <!-- 原有Label和Entry Frame -->
    </Grid>
    <!-- 建议列表,紧跟输入框下方,覆盖其他控件 -->
    <StackLayout BindableLayout.ItemsSource="{Binding SuggestedText}" 
                 IsVisible="{Binding IsVisible}"
                 BackgroundColor="White"
                 RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=InputGrid, Property=Height, Factor=1}">
        <!-- 建议项模板 -->
    </StackLayout>
</RelativeLayout>
修改后的完整XAML代码
<StackLayout BindableLayout.ItemsSource="{Binding MyTextList}"  VerticalOptions="FillAndExpand">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Frame Margin="0,10,0,10" Padding="0" HasShadow="False" BackgroundColor="Transparent">
                <Grid Margin="20">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" ></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <StackLayout Orientation="Vertical" Grid.Column="0" Grid.Row="0" HorizontalOptions="FillAndExpand">
                        <AbsoluteLayout VerticalOptions="Start" HorizontalOptions="FillAndExpand">
                            <Grid Margin="0" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" ></RowDefinition>
                                    <RowDefinition Height="*"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Label Text="{x:Static Rec:VestParkResource.SomeText}" TextColor="Black" FontAttributes="Bold" Grid.Column="0" Grid.Row="0" />
                                <Frame Grid.Column="0" Grid.Row="1" Padding="5" 
                                       BorderColor="{StaticResource GrayBorderColor}" CornerRadius="30" 
                                       HeightRequest="55" HorizontalOptions="FillAndExpand" >
                                    <controls:BorderlessEntry TextTransform="Uppercase" 
                                                              Text="{Binding Text}"
                                                              Index = "{Binding Index}"
                                                              TextChanged ="SuggestShow" Completed="SuggestShow"
                                                              MaxLength="50" x:Name="LicensePlate" Keyboard="Text" 
                                                              Placeholder="{x:Static Rec:VestParkResource.SomeText}"
                                                              FontFamily="OpenSansRegular" />
                                </Frame>
                            </Grid>
                            <StackLayout BindableLayout.ItemsSource="{Binding SuggestedText}" BindableLayout.EmptyView="No Suggestions"
                                         x:Name="SuggestedTextView"  Orientation="Vertical" IsVisible="{Binding IsVisible}"
                                         BackgroundColor="White" 
                                         AbsoluteLayout.LayoutFlags="WidthProportional"
                                         AbsoluteLayout.LayoutBounds="0,65,1,AutoSize">
                                <BindableLayout.ItemTemplate>
                                    <DataTemplate>
                                        <StackLayout BackgroundColor="White" Padding="5" Margin="0" >
                                            <Label Text="{Binding .}" FontSize="16" TextColor="#FF464859"/>
                                        </StackLayout>
                                    </DataTemplate>
                                </BindableLayout.ItemTemplate>
                            </StackLayout>
                        </AbsoluteLayout>
                    </StackLayout>
                    <StackLayout Grid.Column="1" Grid.Row="0" Orientation="Vertical"  HorizontalOptions="FillAndExpand">
                        <Grid Margin="0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto" ></RowDefinition>
                                <RowDefinition Height="*"></RowDefinition>
                            </Grid.RowDefinitions>
                            <Label Text="{x:Static Rec:VestParkResource.Comment}" TextColor="Black" FontAttributes="Bold" Grid.Column="0" Grid.Row="0" />
                            <Frame Grid.Column="0" Grid.Row="1" Padding="5" HasShadow="False" BorderColor="{StaticResource GrayBorderColor}" CornerRadius="30" HeightRequest="55" HorizontalOptions="FillAndExpand">
                                <controls:BorderlessEntry 
                                                          TextTransform="Uppercase" 
                                                          Text="{Binding Comment}"
                                                          MaxLength="50" x:Name="Comment" Keyboard="Text" 
                                                          Placeholder="{x:Static Rec:VestParkResource.Comment}"
                                                          FontFamily="OpenSansRegular" />
                            </Frame>
                        </Grid>
                    </StackLayout>
                </Grid>
            </Frame>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.06 01:31:15