Xamarin：动态将行添加到网格时的大小问题答案

【问题标题】：Xamarin: Sizing Issues when dynamically adding rows to a GridXamarin：动态将行添加到网格时的大小问题
【发布时间】：2021-11-05 10:39:32
【问题描述】：

我是 Xamarin 的新手，我正在尝试找出一些基本功能。

我有一个简单的内容页面，其中包含一个带有嵌套 StackLayout 的 ScrollView，然后是 StackLayout 中的其他嵌套控件：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="TestApp.Views.ScrollGrow">

  <ScrollView x:Name="myScrollView" BackgroundColor="LightBlue" VerticalOptions="FillAndExpand">
    <StackLayout x:Name="MainStack" BackgroundColor="YellowGreen" VerticalOptions="FillAndExpand">
        <Label Text="Start of StackLayout"></Label>
        <Button Text="Populate Grid" Clicked="Button_Clicked" x:Name="btnFill" BackgroundColor="Black" TextColor="White"></Button>
        <Grid x:Name="myGrid" BackgroundColor="Yellow" VerticalOptions="FillAndExpand"></Grid>
        <Label Text="Bottom of StackLayout"></Label>
    </StackLayout>
  </ScrollView>
</ContentPage>

我正在尝试在单击按钮时向网格动态添加行：

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace TestApp.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
public partial class ScrollGrow : ContentPage
{

    public ScrollGrow()
    {
        InitializeComponent();
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        Device.BeginInvokeOnMainThread(() =>
        {
            for (int i = 0; i <= 35; i++)
            {
                FillMyGrid(i);
            }               
        });
    }

    private void FillMyGrid(int theCounter)
    {
        myGrid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto, });
        var testLabel = new Label();
        testLabel.Text = "Test row number: " + theCounter;
        testLabel.TextColor = Color.Black;
        Grid.SetRow(testLabel, theCounter);
        Grid.SetColumn(testLabel, 0);
        myGrid.Children.Add(testLabel);
    }

  }
}

不幸的是，当 Grid 增长时，StackLayout 的大小并没有出现增长。

Before	After

我在这里缺少什么？有人可以向我解释为什么这不起作用以及正确的方法是什么？

【问题讨论】：

标签： xaml xamarin xamarin.forms xamarin.android xamarin.ios

【解决方案1】：

在ScrollView之外使用StackLayout可能会达到你想要的效果。

这里是 xaml 代码：

<StackLayout>
    <ScrollView x:Name="myScrollView" BackgroundColor="LightBlue" VerticalOptions="FillAndExpand">
        <StackLayout x:Name="MainStack" BackgroundColor="YellowGreen" VerticalOptions="FillAndExpand">
            <Label Text="Start of StackLayout"></Label>
            <Button Text="Populate Grid" Clicked="btnFill_Clicked"  x:Name="btnFill" BackgroundColor="Black" TextColor="White"></Button>
            <Grid x:Name="myGrid" BackgroundColor="Yellow" VerticalOptions="FillAndExpand"></Grid>
            <Label Text="Bottom of StackLayout"></Label>
        </StackLayout>
    </ScrollView>
</StackLayout>

截图如下：

【讨论】：

您还有其他问题
您认为 Xamarin 新开发人员最常犯的设计错误是什么？
按照微软提供的例子可以有效避免大部分问题。

【解决方案2】：

我建议您像这样重新安排您的 UI（使用 Grid）。

<Grid BackgroundColor="YellowGreen">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Label Grid.Row="0" Text="Start of StackLayout"></Label>
    <Button Grid.Row="1" Text="Populate Grid" Clicked="Button_Clicked" x:Name="btnFill" BackgroundColor="Black" TextColor="White"></Button>

    <ScrollView Grid.Row="2">
        <Grid x:Name="myGrid" BackgroundColor="Yellow"></Grid>
    </ScrollView>

    <Label Grid.Row="3" Text="Bottom of StackLayout"></Label>
</Grid>

另外，要显示重复数据，最好使用ListView。

【讨论】：

谢谢！我会考虑切换到 ListView。

【解决方案3】：

StackLayouts 可能有点令人困惑。对于具有垂直方向的 StackLayout 的子级，任何扩展请求（即VerticalOptions="FillAndExpand"）都将被忽略，因为 StackLayout 本身正在确定每个子级的大小，因此其自身的大小是所有子级的总和加上任何间距和填充。

As Hadi also suggested，显示重复数据时最好使用ListView。我还鼓励您对 Grids 非常谨慎地使用 Auto，因为计算布局更改时行高的额外负担。如果您希望继续使用 Grid，我建议您对行使用 *（星号）单位以确保它们的大小相对于彼此，或者设置一个静态行高，然后会冒泡到 StackLayout 的计算高度。

【讨论】：

感谢您的信息和详细解释！