根据 label 多行调整 Maui Grid Row 高度

Question

我是 MAUI 的新手，我想开发一个用户有多个输入字段的应用程序（从 XML 文件动态添加）。 问题是，当 label 只是一行时，网格单元格似乎可以很好地调整，但是一旦文本溢出到多行，单元格高度就不会相应调整。

检查这个例子：

<ScrollView>
    <VerticalStackLayout>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>

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

            <Label x:Name="c1r1" Grid.Column="0" Grid.Row="0" Text="Some information that will span multiple rows. I'd like the row height to adjust accordingly." VerticalTextAlignment="Center"/>
            <RadioButton x:Name="c2r1" Grid.Column="1" Grid.Row="0" Content="OK"/>
            <RadioButton x:Name="c3r1" Grid.Column="2" Grid.Row="0" Content="Not OK at all"/>

            <Label x:Name="c1r2" Grid.Column="0" Grid.Row="1" Text="Short text" VerticalTextAlignment="Center"/>
            <RadioButton x:Name="c2r2" Grid.Column="1" Grid.Row="1" Content="OK"/>
            <RadioButton x:Name="c3r2" Grid.Column="2" Grid.Row="1" Content="NOK"/>
        </Grid>
    </VerticalStackLayout>
</ScrollView>

这在宽屏上看起来不错，例如 Windows 机器。 但是，在小屏幕的 Android 模拟器上，第 0 列第 0 行上的长文本 label 换行但仅显示前两行。 同样，第 0 列第 2 行的单选按钮换行，但在底部被部分切割。

我尝试了不同的 RowDefinition Height 设置，例如 * 和 Auto，但没有任何改变。

我也尝试过将控件包装在不同类型的布局中，但没有找到任何符合我要求的东西。

我该怎么做才能使行高扩展以便整个文本可见？

Answer 1

你需要让你的 Label 多行：

设置 LineBreakMode 以设置当您的标签文本在特定行上无处可至 go 时发生的情况，通常多行标签使用 CharacterWrap。

将 Maxlines 设置为一个 int 值，以便在达到最大行数后停止：

其他相关属性可以在这里找到： https://learn.microsoft.com/en-us/do.net/maui/user-interface/controls/label

<Label LineBreakMode="CharacterWrap" MaxLines="5"/>

有关 maxlines 工作原理的详细信息： https://learn.microsoft.com/en-us/do.net/maui/user-interface/controls/label#display-a-specific-number-of-lines

Answer 2

根据您的代码，我创建了一个演示并部署到我的 android 设备（android 9），它在我这边运行正常。 并且我添加了一个按钮来将 label 的文本重置为长文本。

您可以参考以下代码：

<ScrollView> 
    <VerticalStackLayout
      >

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>

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

            <Label x:Name="c1r1" Grid.Column="0" Grid.Row="0" Text="Some information that will span multiple rows. I'd like the row height to adjust accordingly." VerticalTextAlignment="Center"/>
            <RadioButton x:Name="c2r1" Grid.Column="1" Grid.Row="0" Content="OK" VerticalOptions="Center"/>
            <RadioButton x:Name="c3r1" Grid.Column="2" Grid.Row="0" Content="Not OK at all" VerticalOptions="Center"/>

            <Label x:Name="c1r2" Grid.Column="0" Grid.Row="1" Text="Short text" VerticalTextAlignment="Center"/>
            <RadioButton x:Name="c2r2" Grid.Column="1" Grid.Row="1" Content="OK" VerticalOptions="Center"/>
            <RadioButton x:Name="c3r2" Grid.Column="2" Grid.Row="1" Content="NOK" VerticalOptions="Center"/>
        </Grid>

        <Button  Text="reset" Clicked="Button_Clicked" />

    </VerticalStackLayout>
</ScrollView>

方法Button_Clicked ：

private void Button_Clicked(object sender, EventArgs e) 
          {
        c1r1.Text = "Some information that will span multiple rows. I'd like the row height to adjust accordingly.abcddddddddddddddddddddddddddddddddddabcddddddddddddddddddddddddddddddddddabcdddddddddddddddddddddddddddddddddd";
    }

笔记：

此外，单选按钮缺少这些设置，当我设置 100 像素时，单选按钮移动但文本停留在顶部，这也很丑陋。

为此，您可以为每个RadioButton设置以下属性：

 VerticalOptions="Center"

Answer 3

也许在您的情况下使用标签的“已加载”事件会很有用。

<ScrollView>
  <VerticalStackLayout>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

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

        <Label x:Name="c1r1" Loaded="Label_Loaded" Grid.Column="0" Grid.Row="0" Text="Some information that will span multiple rows. I'd like the row height to adjust accordingly." VerticalTextAlignment="Center"/>
        <RadioButton x:Name="c2r1" Grid.Column="1" Grid.Row="0" Content="OK"/>
        <RadioButton x:Name="c3r1" Grid.Column="2" Grid.Row="0" Content="Not OK at all"/>

        <Label x:Name="c1r2" Grid.Column="0" Grid.Row="1" Text="Short text" VerticalTextAlignment="Center"/>
        <RadioButton x:Name="c2r2" Grid.Column="1" Grid.Row="1" Content="OK"/>
        <RadioButton x:Name="c3r2" Grid.Column="2" Grid.Row="1" Content="NOK"/>
    </Grid>
  </VerticalStackLayout>
</ScrollView>

和以下处理程序

private void Label_Loaded(object sender, EventArgs e)
{
    var label = sender as Label;
    var grid = label.Parent as Grid;
    var labelColumnWidthPart = grid.ColumnDefinitions[0].Width.Value;
    var allColumnsWidthParts = grid.ColumnDefinitions.Select(definition => definition.Width).Sum(width => width.Value);
    var screenWidth = (DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density);
    var screenHeight = (DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density);
    var sizeRequest = label.Measure((screenWidth * labelColumnWidthPart) / allColumnsWidthParts, screenHeight);
    label.HeightRequest = sizeRequest.Request.Height;
}