如何在Xamarin.Forms iOS中实现"Soft Keyboard Input Mode"并修复键盘重叠问题?



我在Xamarin.Forms iOS应用程序中实现"软键盘输入模式"和修复键盘重叠问题时遇到了麻烦。

我尝试过以下解决方案:

  • 滚动视图:这对我来说不起作用,因为我已经在内容页面中使用了一个滚动视图,所以嵌套的滚动视图将无法像下面文章中定义的那样工作https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/scroll-view.

  • Xamarin.IQ键盘管理器:这是解决重叠问题,但通过占据它来隐藏顶部内容,我无法向下滚动。

我也尝试过以下文章

  • https://xamgirl.com/adjusting-elements-when-keyboard-shows-in-xamarin-forms/
  • https://github.com/adamped/SoftInput/blob/master/SoftInput/SoftInput.iOS/Render/KeyboardRender.cs

在没有"软键盘输入模式"的情况下,还面临另一个问题,即在关注多次点击时触发键盘上下的输入控制时,顶部和底部有时会出现空白空白。

以下页面布局设计我在我的两个页面中使用(面对2个页面中的问题,我已经在使用滚动视图(

Page 1:
`<ContentPage.Content>
<StackLayout >
<ScrollView Margin="10,10,10,0">
<StackLayout x:Name="pageContentLayout">
</StackLayout>
</ScrollView>
<AbsoluteLayout HorizontalOptions="FillAndExpand" 
VerticalOptions="FillAndExpand">
<StackLayout x:Name="mainEntryLayout" 
AbsoluteLayout.LayoutFlags="All" 
AbsoluteLayout.LayoutBounds="0,0,1,1">
<ActivityIndicator x:Name="entryIndicator" 
IsVisible="False" 
IsRunning="False">
</ActivityIndicator>
<Grid VerticalOptions="EndAndExpand" 
HorizontalOptions="EndAndExpand"
x:Name="entryGrid" 
BackgroundColor ="{StaticResource Color}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="85*"/>
<ColumnDefinition Width="15*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<custom:CustomEntry CornerRadius="4"  
IsCurvedCornersEnabled="True"  
BorderColor="{StaticResource Color}"                     
PlaceholderColor="{StaticResource Color}"                     
TextColor="{StaticResource Color}"   
VerticalOptions="FillAndExpand" 
HeightRequest="100"
HorizontalOptions="FillAndExpand" 
Grid.Column="0" 
FontSize="12"                   
BackgroundColor ="{StaticResource Color}"
x:Name="commentCustomEntry"
Keyboard="Chat"                 
Margin="10"/>
<ImageButton VerticalOptions="CenterAndExpand" 
HorizontalOptions="CenterAndExpand"                                                     
Grid.Column="1"
HeightRequest="30" 
WidthRequest="30" 
x:Name="SendBtn"
BackgroundColor="Transparent"/>
</Grid>
</StackLayout>
<StackLayout x:Name="pageIndicatorLayout" 
IsVisible="false"                              
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<Label x:Name="loadingLabel" TextColor="{StaticResource Color}"/>
<ActivityIndicator IsRunning="true" 
Color ="{DynamicResource Color}"/>
</StackLayout>
</AbsoluteLayout>
</StackLayout>
</ContentPage.Content>
`

Page 2:

`
<StackLayout>
<AbsoluteLayout HorizontalOptions="FillAndExpand" 
VerticalOptions="FillAndExpand">
<StackLayout x:Name="pageContentLayout" 
AbsoluteLayout.LayoutFlags="All" 
AbsoluteLayout.LayoutBounds="0,0,1,1">
<StackLayout x:Name="ImgLayout" ></StackLayout>
<ScrollView>
<StackLayout>
<StackLayout Orientation="Vertical"  
HorizontalOptions="FillAndExpand">
<Label Text="{Binding titleLable}" 
FontAttributes="Bold" 
TextColor="{StaticResource Color}" 
Margin="10, 0, 0, 0" 
FontSize="14"/>
<Label x:Name="resourceLabel"
TextColor="{StaticResource Color}" 
FontSize="11" 
Margin="10, 0, 0, 0" />
<Label Text="{Binding sourceLabel}" 
TextColor="{StaticResource Color}" 
FontSize="11" 
FontAttributes="Bold" 
Margin="10, 0, 0, 0" />
<Label x:Name="personLabel"
TextColor="{StaticResource Color}" 
FontSize="11" 
Margin="10, 0, 0, 0" />
<Label FontAttributes="Bold, Italic"    
FontSize="12" 
Padding="10,10,10,0"
Text="{Binding hightlightLabel}"/>
</StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<local:ExtendedWebViewModel x:Name="webContentView"
Grid.Row="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
</Grid>
</StackLayout>
</ScrollView>
<Grid Padding="10,0,10,0" RowSpacing="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60*"/>
<ColumnDefinition Width="40*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>                    
<StackLayout Grid.Column="1"
Grid.Row="0"
Grid.RowSpan="2"
Orientation="Horizontal" 
HorizontalOptions="EndAndExpand"
VerticalOptions="CenterAndExpand">
<Image Source="{Binding lImg, Converter={StaticResource Converter}}"
HeightRequest="20" 
WidthRequest="20">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnLImgTapped" 
    CommandParameter="{Binding item}"/>
</Image.GestureRecognizers>
</Image>
<Label x:Name="tCount" 
VerticalOptions="CenterAndExpand"
Text="{Binding tCount}" 
FontSize="12">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="OntCountTapped" 
    CommandParameter="{Binding item}"/>
</Label.GestureRecognizers>
</Label>
<Image Source="{Binding cImg, Converter={StaticResource Converter}}"
HeightRequest="20" 
WidthRequest="20">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnCImgTapped" 
    CommandParameter="{Binding item}"/>
</Image.GestureRecognizers>
</Image>
<Label Text="{Binding cCount}"
VerticalOptions="CenterAndExpand"
FontSize="12">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="OnCCountTapped" 
    CommandParameter="{Binding item}"/>
</Label.GestureRecognizers>
</Label>
<Image Source="{Binding SImg, Converter={StaticResource Converter}}"
HeightRequest="20" 
WidthRequest="20">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnSImgTapped" 
    CommandParameter="{Binding item}"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
<Grid VerticalOptions="EndAndExpand" 
HorizontalOptions="EndAndExpand"
x:Name="entryGrid" 
BackgroundColor ="{StaticResource Color}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="85*"/>
<ColumnDefinition Width="15*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<custom:CustomEntry CornerRadius="4"  
IsCurvedCornersEnabled="True"  
BorderColor="{StaticResource Color}"                     
PlaceholderColor="{StaticResource Color}"
TextColor="{StaticResource CommentEntryValueColor}"   
VerticalOptions="FillAndExpand" 
HeightRequest="100"
HorizontalOptions="FillAndExpand" 
Grid.Column="0"                        
FontSize="12"                   
BackgroundColor ="Color"
x:Name="commentCustomEntry"
Keyboard="Chat"                 
Margin="10"/>
<ImageButton VerticalOptions="CenterAndExpand" 
HorizontalOptions="CenterAndExpand"Grid.Column="1"
HeightRequest="30" 
WidthRequest="30" 
Clicked="OnSendButtonClicked"
x:Name="SendBtn"
BackgroundColor="Transparent"/>
</Grid>
</StackLayout>
<StackLayout x:Name="pageIndicatorLayout" 
IsVisible="false" 
Padding="12"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<Label x:Name="loadingLabel" TextColor="{StaticResource Color}"/>
<ActivityIndicator IsRunning="true" 
Color ="{DynamicResource Color}"/>
</StackLayout>
</AbsoluteLayout>
</StackLayout>
`

你能提出更好的解决方案吗?

感谢

如果您只针对ios,请删除滚动视图并尝试此插件。https://github.com/paulpatarinski/Xamarin.Forms.Plugins/tree/master/KeyboardOverlap

在安装该nuget之后,在Xamarin.Forms.Init().之后将这些行添加到Appdelegate类中

KeyboardOverlapRenderer.Init ();

你不需要做任何其他事情,然后初始化插件。键盘将不再与控件重叠!!!

最新更新