如何在 Xamarin Forms 中创建类似聊天的页脚布局？答案

【问题标题】：How to create chat-like footer layout in Xamarin Forms?如何在 Xamarin Forms 中创建类似聊天的页脚布局？
【发布时间】：2018-01-29 03:57:58
【问题描述】：

我正在使用 Xamarin Forms 为 Abdroid 和 UWP 创建一个类似聊天的应用程序。我想创建一个类似于this 的页脚布局（意味着 2 个按钮和一个水平方向的编辑器）。

我使用以下 xaml 在图像中创建了布局：

<Grid >
        <Grid.Margin>
            <OnPlatform x:TypeArguments="Thickness">
                <On Platform="Android">5,0,5,5</On>
                <On Platform="Windows">5,0,5,25</On>
            </OnPlatform>
        </Grid.Margin>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Editor x:Name="MessageText"  Text="" Grid.Column="0" />
        <local:RoundedButton x:Name="Button2" Clicked="click2"  BackgroundColor="#000000" Grid.Column="1" WidthRequest="50" HeightRequest="50" BorderRadius="25" VerticalOptions="Center" />
        <local:RoundedButton x:Name="Button1" Clicked="click1"  BackgroundColor="#000000" Grid.Column="2" WidthRequest="50" HeightRequest="50" BorderRadius="25" VerticalOptions="Center"/>
</Grid>

这种布局的问题是编辑器不能完全显示超过一行。当我继续编写比编辑器宽度更长的文本时，我会得到类似this 的信息。如您所见，第一行已被截断，当我开始新行时，仅显示其底部。

据我所知，使用 LinearLayout 和 layout_weight 属性在 Android 中创建这种布局非常容易。但我现在尽量避免为整个页脚创建渲染器。

编辑

这是我在 Android 中编写的一个示例，其中包含想要的结果：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
  <EditText 
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:hint="Enter a message"/>
  <Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="hi"/>
  <Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="bi"/>
</LinearLayout>

结果如下：

【问题讨论】：

标签： android xamarin xamarin.android uwp xamarin.forms

【解决方案1】：

要在文本更改时扩展编辑器，您需要触发InvalidateMeasure 方法，该方法将强制调整布局大小。这是一个受保护的方法，因此您需要继承 Editor 控件并进行以下更改：

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

【讨论】：

我已经尝试过了，当我按下回车键开始新行时它会有所帮助，但如果我只是继续写入超过编辑器宽度的字符（不按回车键），它就没有帮助。
@JackPot16 我明白了，单击 Enter 会立即增加大小，而连续写入只会定期调整控件的大小。它确实变大了，但从未完全显示所有线条。还不确定是什么问题。
“定期调整控件大小”是什么意思？我根本没有看到它调整大小。问题是我希望能够看到我输入的所有文本，而不仅仅是其中的一部分，就像在 whatsapp 中一样。
@JackPot16 我在 Android 上写了一个小测试应用程序。当我在编辑器中书写并且文本转到下一行时，控件不会立即调整大小。相反，它仅在我处于新行中间时才调整大小。当我按 Enter 时，控件会立即按预期调整大小。
@handkie 我找到了解决方案，我需要将此 CustomEditor 放在 ScrollView 中。我添加了代码作为附加答案。

【解决方案2】：

好的，我最后想通了。

解决我的问题的方法是将我的 CustomEditor 放在 ScrollView 中。

所以，这是对我有用的代码：

<Grid VerticalOptions="Start">
    <Grid.Margin>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="Android">5,0,5,5</On>
            <On Platform="Windows">5,0,5,25</On>
        </OnPlatform>
    </Grid.Margin>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <ScrollView>
        <local:RoundedEditor x:Name="MessageText"  Text="" Grid.Column="0" />
    </ScrollView>
    <Button x:Name="Button2"  BackgroundColor="#000000" Grid.Column="1" WidthRequest="50" HeightRequest="50" BorderRadius="25" VerticalOptions="Center" />
    <Button x:Name="Button1" BackgroundColor="#000000" Grid.Column="2" WidthRequest="50" HeightRequest="50" BorderRadius="25" VerticalOptions="Center"/>
</Grid>

【讨论】：