在Xamarin.Forms（iOS）中使用Wordwrap调整编辑器大小时，编辑器位于键盘后面吗？

Question

我正在进一步进行并生成新的票证，因为它与本期How to prevent Editor to go behind the keyboard in Xamarin.Forms?完全不同

我有聊天页面和自动尺寸编辑器。当用户键入多于1-2行时，Editor会正确展开，但会在键盘后面。

但是，如果用户使用“返回”添加多行，则它可以正常工作。我想我在Xaml页面上缺少一些可与Editor和StackLayout一起玩的东西。

请提出建议

请注意，我不使用const query = datastore.createQuery('Kind') .filter('project', '=', datastore.key(['ProjectId', 'hereIsId'])) .limit(1500); 。为了管理键盘可见性的布局，我使用了自定义堆栈布局Xam.Plugins.Forms.KeyboardOverlap，该布局将底部填充设置为键盘的出现和消失。

Page Xaml

WrapperStackLayoutRenderer

EditorWithAutoSize

<ContentPage.Content>
    <local1:WrapperStackLayout>
        <Grid Margin="0" Padding="0" RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>

            <ListView x:Name="MessagesListView" 
                ItemTemplate="{StaticResource MessageTemplateSelector}"
                ItemsSource="{Binding Conversations}" 
                HasUnevenRows="True" 
                Margin="0" 
                Grid.Row="0"
                SeparatorVisibility="None"/>

            <Grid RowSpacing="1" ColumnSpacing="2" Padding="5" Grid.Row="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="auto" />
                </Grid.ColumnDefinitions>
                <local1:EditorWithAutoSize x:Name="txtMessage" Text="{Binding SendingText}" TextChanged="EnableSend"/>
                <Frame x:Name="SendButton" Grid.Column="1" Margin= "0" Padding="0" HasShadow="false" HeightRequest="25"
            BackgroundColor="Transparent" HorizontalOptions="FillAndExpand">
                    <Frame.GestureRecognizers>
                        <TapGestureRecognizer Tapped="SendMessage_Click" NumberOfTapsRequired="1" />
                    </Frame.GestureRecognizers>
                    <Label Text="Send" x:Name="sendButton" HeightRequest="20"
                HorizontalOptions="Center" VerticalOptions="Center"/>
                </Frame>
            </Grid>
        </Grid>
    </local1:WrapperStackLayout>
</ContentPage.Content>

WrapperStackLayout

public class EditorWithAutoSize : Editor
{
    public EditorWithAutoSize()
    {
        this.TextChanged += (sender, e) => {
            this.InvalidateMeasure();
        };
    }
}

WrapperStackLayoutRenderer

public class WrapperStackLayout : StackLayout
{
}

Answer 1

您必须在第二个RowDefinition Height="auto"中添加Grid，然后编辑器将使用您输入的文本自动分组：

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

完整的代码应为：

    <Grid RowSpacing="1" ColumnSpacing="2" Padding="5" Grid.Row="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

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

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>
        <local:EditorWithAutoSize x:Name="txtMessage" Text="Binding SendingText" />
        <Frame x:Name="SendButton" Grid.Column="1" Margin= "0" Padding="0" HasShadow="false" HeightRequest="25"
    BackgroundColor="Transparent" HorizontalOptions="FillAndExpand">

            <Label Text="Send" x:Name="sendButton" HeightRequest="20"
        HorizontalOptions="Center" VerticalOptions="Center"/>
        </Frame>
     </Grid>

我在这里上传了测试样本，您可以检查它：editor-xamarin.forms

顺便说一句，github中有一个示例可供您参考：ChatUIXForms，您可以在他的项目中使用编辑器和自定义渲染器代码。还有blogs位作者写的文章可以阅读。