Xamarin Forms：键盘和聊天页面底部布局之间的间距问题

Question

我正在使用

CustomEditorRenderer

来解决键盘和编辑器之间的间距问题。我已经发布了一张与that相关的票。现在我有附件和发送图标在同一个地方。但是当键盘出现时，UI 上只显示编辑器，附件和发送图标没有显示。

用户界面：

我的 XAML：

<Grid 
x:Name="newcomment_stack"
Margin="2,0,2,10"
IsVisible="false">

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="8*" />
    <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<Image 
Grid.Row="0" 
Grid.Column="0"
VerticalOptions="CenterAndExpand"
x:Name="Attachment_Image"
Source="ic_attachment_xx.png">
    <Image.WidthRequest>
        <OnIdiom x:TypeArguments="x:Double">
            <OnIdiom.Phone>40</OnIdiom.Phone>
            <OnIdiom.Tablet>60</OnIdiom.Tablet>
            <OnIdiom.Desktop>40</OnIdiom.Desktop>
        </OnIdiom>
    </Image.WidthRequest>
    <Image.HeightRequest>
        <OnIdiom x:TypeArguments="x:Double">
            <OnIdiom.Phone>40</OnIdiom.Phone>
            <OnIdiom.Tablet>60</OnIdiom.Tablet>
            <OnIdiom.Desktop>40</OnIdiom.Desktop>
        </OnIdiom>
    </Image.HeightRequest>
</Image>

<renderer:CustomEditor
    Grid.Row="0" 
    Grid.Column="1"
    x:Name="commentbody_entry"
    Placeholder="Add your comment here"
    BackgroundColor="#f1f1f1"
    PlaceholderColor = "#a39ea1"
    TextColor = "#54493b"
    TextChanged="commentbody_entry_TextChanged"
    Style="{StaticResource AddCommentEditorStyle}">
    <renderer:CustomEditor.HeightRequest>
        <OnIdiom x:TypeArguments="x:Double">
            <OnIdiom.Phone>60</OnIdiom.Phone>
            <OnIdiom.Tablet>90</OnIdiom.Tablet>
            <OnIdiom.Desktop>60</OnIdiom.Desktop>
        </OnIdiom>
    </renderer:CustomEditor.HeightRequest>
</renderer:CustomEditor>

<StackLayout 
    x:Name="sendcomment_stack"
    IsEnabled="False"
    VerticalOptions="CenterAndExpand"
    Grid.Row="0" 
    Grid.Column="2">
    <Image 
        x:Name="sendcomment_image"
        Source="ic_gray_sendcomment_xx.png">
        <Image.WidthRequest>
            <OnIdiom x:TypeArguments="x:Double">
                <OnIdiom.Phone>40</OnIdiom.Phone>
                <OnIdiom.Tablet>60</OnIdiom.Tablet>
                <OnIdiom.Desktop>40</OnIdiom.Desktop>
            </OnIdiom>
        </Image.WidthRequest>
        <Image.HeightRequest>
            <OnIdiom x:TypeArguments="x:Double">
                <OnIdiom.Phone>40</OnIdiom.Phone>
                <OnIdiom.Tablet>60</OnIdiom.Tablet>
                <OnIdiom.Desktop>40</OnIdiom.Desktop>
            </OnIdiom>
        </Image.HeightRequest>
    </Image>
    <StackLayout.GestureRecognizers>
        <TapGestureRecognizer
            Tapped="Send_Comment"
            NumberOfTapsRequired="1">
        </TapGestureRecognizer>
    </StackLayout.GestureRecognizers>
</StackLayout>
</Grid>

我在 IOS 中的 CustomEditorRenderer：

public class CustomEditorRenderer : EditorRenderer
{
    public CustomEditorRenderer()
    {
        UIKeyboard.Notifications.ObserveWillShow((sender, args) =>
        {
            if (Element != null)
            {
                Element.Margin = new Thickness(0, 0, 0, args.FrameEnd.Height); //push the entry up to keyboard height when keyboard is activated
            }
        });

        UIKeyboard.Notifications.ObserveWillHide((sender, args) =>
        {
            if (Element != null)
            {
                Element.Margin = new Thickness(0); //set the margins to zero when keyboard is dismissed
            }
        });
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            Control.Layer.CornerRadius = 10;
            Control.TextColor = UIColor.Black;
        }
    }
}

有什么办法可以在出现键盘时拉起发送和附件图标吗？

Answer 1

使用Grid时，打开键盘布局不会上移。您只需要将您的 Grid 放在 ContentPage 的 ScrollView 中。如果你使用ScrollView，你需要注意你的

ObserveWillShow

中的

ObserveWillHide

和

CustomEditorRenderer

方法是不需要的。

像这样：

 <ScrollView>
            <Grid Margin="20,600,20,20">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

 
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

               <Image Grid.Row="0"
               Grid.Column="0"
               VerticalOptions="CenterAndExpand"
               Source="Test.png">
               </Image>

               <Editor
                 WidthRequest="100"
                 Grid.Row="0"
                 Grid.Column="1"
                 Placeholder="test"
                 BackgroundColor="#f1f1f1"
                 PlaceholderColor = "#a39ea1"
                 TextColor = "#54493b"/>
               
               <Image Grid.Row="0"
               Grid.Column="2"
               VerticalOptions="CenterAndExpand"
               Source="Test.png">
               </Image>
            </Grid>

        </ScrollView>