如何实现列表项下拉建议覆盖下方控件的重复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
相关产品推荐
相关产品推荐

