在 Xamarin Forms 中使用 StackLayout 作為父布局時，ScrollView 不起作用

Question

我有一個包含Grid的StackLayout ，這個 Grid 再次包含一個Grid ，第二個 Grid 包含ScrollView 。 問題是當最頂部的布局是 StackLayout 時 ScrollView 不滾動，如果我在Grid或RelativeLayout更改它，它會滾動。

這是Xaml代碼：

<StackLayout>
    <Label Text="Home Page" HorizontalOptions="Center" FontSize="Large"/>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid Grid.Row="0">
            <Grid.Style>
                <OnIdiom x:TypeArguments="Style"
                         Desktop="{StaticResource TabletGridStyle}"
                         Phone="{StaticResource PhoneGridStyle}" />
            </Grid.Style>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <StackLayout Grid.Row="0" Orientation="Horizontal">
                <Label x:Name="cityName" Text="City" FontSize="Large"
                            VerticalOptions="Center"
                            HorizontalOptions="StartAndExpand" />

                <SearchBar x:Name="SearchBar"
                                HorizontalOptions="EndAndExpand"
                                VerticalOptions="Center"
                                WidthRequest="250"
                                Placeholder="Search..."
                                TextChanged="Handle_SearchTextChangedSearch" />
            </StackLayout>

            <ScrollView Grid.Row="1" Orientation="Vertical" VerticalScrollBarVisibility="Always">
                <StackLayout VerticalOptions="FillAndExpand">
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                    <Label Text="Sample Text" />
                </StackLayout>
            </ScrollView>

            <ListView x:Name="ListView"
                      ItemsSource="{Binding Places}"
                      ItemSelected="ItemSelected"                          
                      HasUnevenRows="True"
                      Grid.Row="1"
                      IsVisible="False"
                      BackgroundColor="#FFEBFF"
                      HeightRequest="100"
                      WidthRequest="250"
                      HorizontalOptions="End"
                      RowHeight="40"
                      Opacity="0.9">

                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Padding="10">
                                <Label VerticalOptions="Center"
                                               TextColor="Black">
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="{Binding name}" />
                                            <Span Text=", " />
                                            <Span Text="{Binding country}" />
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
        <Frame Grid.Row="0" x:Name="loadingFrame" IsVisible="False" VerticalOptions="Center" HasShadow="True" CornerRadius="5">
            <StackLayout Orientation="Horizontal">
                <ActivityIndicator x:Name="activityIndicatorPhone" Margin="10, 0, 0, 0" IsRunning="False" />
                <Label Text="Loading..." VerticalOptions="Center" FontSize="Large" Margin="20, 0, 0, 0">
                    <Label.IsVisible>
                        <OnIdiom x:TypeArguments="x:Boolean">
                            <OnIdiom.Phone>true</OnIdiom.Phone>
                            <OnIdiom.Desktop>false</OnIdiom.Desktop>
                        </OnIdiom>
                    </Label.IsVisible>
                </Label>
            </StackLayout>
        </Frame>
    </Grid>
</StackLayout>

這是我得到的輸出

當我將父 StackLayout 更改為 Grid 時，內容正在滾動。

這是修改后的代碼：

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

    <Label Grid.Row="0" Text="Home Page"  HorizontalOptions="Center" FontSize="Large" />
    <Grid Grid.Row="1">
    ..........
    ..........

可滾動輸出：

但是當最頂層的 Layout 是StackLayout時，我怎么能做到這StackLayout ？

Answer 1

您已將 ScrollView 和 ListView 分配給 Grid.Row="1"。 希望能幫助到你。

Answer 2

您可以將ListView放在ScrollView 。如下：

<StackLayout>
    <!-- Place new controls here -->
    <Label Text="Welcome to Xamarin.Forms!" 
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand" />
    <ScrollView>
        <StackLayout>
            <Label Text="Hello!!! Welcome to Smiley Panda"></Label>
            <Label Text="Hello!!! Smiley Panda Loves you"></Label>
            <Label Text="Hello!!! Welcome to Smiley Panda"></Label>
            <Label Text="Hello!!! Smiley Panda Loves you"></Label>
            <Label Text="Hello!!! Welcome to Smiley Panda"></Label>
            <Label Text="Hello!!! Smiley Panda Loves you"></Label>
            <app20:CustomListView x:Name="listview"
                                  MinimumHeightRequest="96"
                                  Margin="16,0" />
        </StackLayout>
    </ScrollView>
</StackLayout>

在這里你可以看到我自定義了一個ListView來實現它。 如果在UWP 中，您可以忽略它，只需使用普通的 ListView。

public class CustomListView : ListView
{
    public static readonly BindableProperty IsNestedScrollProperty = BindableProperty.Create(
       propertyName: "IsNestedScroll",
       returnType: typeof(bool),
       declaringType: typeof(CustomListView),
       defaultValue: false
       );

    public bool IsNestedScroll
    {
        get
        {
            return (bool)GetValue(IsNestedScrollProperty);
        }
        set
        {
            SetValue(IsNestedScrollProperty, value);
        }
    }
}

在 ContentPage 中，為 ListView 添加示例數據：

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        listview.ItemsSource = AddPandaFamily();
    }

    List<string> pandaFamily = new List<string>();
    public List<string> AddPandaFamily()
    {
        for (int i = 0; i < 50; i++)
        {
            pandaFamily.Add("Smiley Panda");
            pandaFamily.Add("Red Panda");
            pandaFamily.Add("Qinling Panda");
            pandaFamily.Add("Oleosa Panda");
            pandaFamily.Add("Ailuropoda Panda");

        }
        return pandaFamily;
    }
}

在UWP 中的效果：

如果需要在Android 中實現它，則需要在 Xamarin Android 中使用 CustomRenderer 中的BindableProperty 。

public class CustomListViewRenderer : ListViewRenderer
{
    public CustomListViewRenderer(Android.Content.Context context) : base(context)
    {

    }

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)
    {
        base.OnElementChanged(e);
        if (e.NewElement != null)
        {
            var listview = this.Control as Android.Widget.ListView;
            listview.NestedScrollingEnabled = true;
        }
    }
}