根据多行标签调整毛伊岛网格行的高度

Question

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

检查此示例：

<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 Machine一样。但是，在小屏幕的Android Emulator上，第0列第0行的长标签文本换行，但只显示前两行。同样，第0列第2行上的单选按钮也会换行，但底部会被部分剪切。

我尝试过不同的"行定义高度"设置，如"*"one_answers"自动"，但没有改变任何内容。

我也尝试过用不同类型的布局包装控件，但没有找到任何我想要的东西。

我可以做些什么来扩展行高，使整个文本可见？？

Answer 1

您需要使您的标签多行：

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

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

其他相关属性可在此处找到：https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/label

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

关于maxlines如何工作的详细信息：https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/label#display-a-特定线编号

Answer 2

也许在您的情况下使用标签的"Loaded"事件会很有用。

<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;
}

Answer 3

基于您的代码，我创建了一个演示并部署到我的android设备(android 9(上，它在我这边正常工作。我添加了一个按钮，将标签的文本重置为长文本。

您可以参考以下代码：

<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"