ScrollView 的大小不变答案

【问题标题】：Size of the ScrollView not changingScrollView 的大小不变
【发布时间】：2020-04-21 15:27:33
【问题描述】：

我在页面上的网格中有两行。第一个显示一些信息。在第二行中，我有另一个两行网格。第一个是 stackLayout 并显示一个圆环图，第二个是带有滚动视图和按钮的 stackLayout。单击按钮时，滚动视图会在 y 轴上平移以显示历史记录项。但是滚动视图的高度没有改变。有人知道为什么吗？？

xaml 文件

<StackLayout Grid.Row="1">
    <Grid>
      <Grid.RowDefinitions>
           <RowDefinition Height="200"/>
           <RowDefinition Height="200"/>
      </Grid.RowDefinitions>

    <StackLayout Grid.Row="0">

        <forms:ChartView x:Name="PieChart" HeightRequest="300"/>

    </StackLayout>

    <StackLayout x:Name="HistoryScroll" Grid.Row="1" TranslationY="120">
          <StackLayout Padding="0" Margin="0">
             <Frame x:Name="HistoryBtn" Padding="0" Margin="5, 5, 0, 5" CornerRadius="5" 
                              HorizontalOptions="EndAndExpand" VerticalOptions="EndAndExpand"   
                              BackgroundColor="#000058">
                <Button Text="History" TextColor="#fff" 
                              BackgroundColor="Transparent" HorizontalOptions="EndAndExpand"               
                              VerticalOptions="EndAndExpand"
                              Margin="0" Padding="0" Clicked="HistoryBtnHandler"/>
             </Frame>

             <Frame BackgroundColor="LightGray" BorderColor="Transparent" Padding="0" 
                                     HeightRequest="10" Margin="0" HasShadow="False"/>
          </StackLayout>

          <ScrollView  HeightRequest="300" IsEnabled="True">
              <StackLayout HeightRequest="300">                                    
                   <Label Text="History Item"/>
                   <Label Text="History Item"/>
                   <Label Text="History Item"/>
                   <Label Text="History Item"/>
                   <Label Text="History Item"/>
                   <Label Text="History Item"/>
                   <Label Text="History Item"/>
                   <Label Text="History Item"/>
                   <Label Text="History Item"/>
                   <Label Text="History Item"/>
                   <Label Text="History Item"/>
                   <Label Text="History Item"/>
                   <Label Text="History Item"/>
                   <Label Text="History Item"/>
                   <Label Text="History Item"/>
              </StackLayout>
          </ScrollView>
  </StackLayout>
 </Grid>                    
</StackLayout>

【问题讨论】：

标签： c# xamarin xamarin.forms scrollview

【解决方案1】：

如果你想正确显示ScrollView，首先，你应该按照Prateek的说法设置RowDefinition Height="*"或设置<RowDefinition Height="auto"/>。

之后我发现你的scrollview不能滚动，如果你在ScrollView中设置了StackLayout的具体高度，你的Scrollview就不能滚动了。因为您的显示内容的高度与您的Scrollview 相等，所以左侧的内容被覆盖了。

如果我在您的ScrollView 中删除您的StackLayout 的高度，它可以滚动。但内容仍未完全显示。你可以看到这个 GIF（我更改了最后几个项目的名称，例如 History Item1、History Item2..）。

我必须降低ScrollView的高度，它才能正确显示。这是代码。

  <StackLayout Grid.Row="1">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="200"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>

                <StackLayout Grid.Row="0">
                <microcharts:ChartView
                   VerticalOptions="Fill"
                   HorizontalOptions="StartAndExpand"
                   WidthRequest="2000"
                   HeightRequest="200"
                   x:Name="mcProgress"
                   Margin="0"
                   IgnorePixelScaling="True"
                    />
                </StackLayout>

                <StackLayout x:Name="HistoryScroll" Grid.Row="1" TranslationY="120">
                    <StackLayout Padding="0" Margin="0">
                        <Frame x:Name="HistoryBtn" Padding="0" Margin="5, 5, 0, 5" CornerRadius="5" 
                              HorizontalOptions="EndAndExpand" VerticalOptions="EndAndExpand"   
                              BackgroundColor="#000058">
                            <Button 
                              Text="History" TextColor="#fff" 
                              BackgroundColor="Transparent" HorizontalOptions="EndAndExpand"               
                              VerticalOptions="EndAndExpand"
                              Margin="0" Padding="0" Clicked="Button_Clicked"/>
                        </Frame>

                        <Frame BackgroundColor="LightGray" BorderColor="Transparent" Padding="0" 
                                     HeightRequest="10" Margin="0" HasShadow="False"/>
                    </StackLayout>

                    <ScrollView HeightRequest="200"   IsEnabled="True" VerticalScrollBarVisibility="Always">
                        <StackLayout >
                            <Label Text="History Item"/>
                            <Label Text="History Item"/>
                            <Label Text="History Item"/>
                            <Label Text="History Item"/>
                            <Label Text="History Item"/>
                            <Label Text="History Item"/>
                            <Label Text="History Item"/>
                            <Label Text="History Item"/>
                            <Label Text="History Item"/>
                            <Label Text="History Item6"/>
                            <Label Text="History Item5"/>
                            <Label Text="History Item4"/>
                            <Label Text="History Item3"/>
                            <Label Text="History Item2"/>
                            <Label Text="History Item1"/>
                        </StackLayout>
                    </ScrollView>
                </StackLayout>
            </Grid>
        </StackLayout>

这里正在运行 GIF。

【讨论】：

【解决方案2】：

由于您只为 Grid Row=1 ScrollView 分配了 200DP，因此最多只有 200 个显示像素。如果您需要使其占用剩余空间，请将Height 设置为*


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

【讨论】：