Visual Studio 根据多行标签调整Maui网格行高度

frebpwbc  于 2022-11-25  发布在  其他
关注(0)|答案(3)|浏览(328)

我是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机器)上看起来很好。但是,在小屏幕的Android Emulator上,第0列第0行的长标签文本换行,但只显示前两行。同样,第0列第2行的单选按钮换行,但底部被部分剪切。
我已经尝试了不同的RowDefinition Height设置,如 * 和Auto,它们没有改变任何东西。
我还尝试过将控件 Package 在不同类型的布局中,但没有找到任何符合我需要的布局。
如何扩展行高以显示整个文本?

plicqrtu

plicqrtu1#

基于你的代码,我创建了一个演示,并部署到我的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"
pzfprimi

pzfprimi2#

您需要将标签设置为多行:
设置LineBreakMode以设置当标签的文本在特定行上无处可去时发生的情况,通常多行标签使用CharacterWrap。
将“最大行数”设置为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-specific-number-of-lines

vlf7wbxs

vlf7wbxs3#

在您的情况下,使用label的“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;
}

相关问题