ScrollView 不在毛伊岛的 StackLayout 内滚动的解决方法

Question

我有一个页面，在 ScrollView 中的 CollectionView 中显示项目列表。我希望用户能够通过点击“添加”按钮或点击页面顶部的图像来将新项目添加到此列表中。我首先使用如下所示的视图层次结构进行尝试。下面的代码是真实代码的缩写版本。我发现将 ScrollView 放入 VerticalStackLayout 会破坏毛伊岛的滚动！ 这里是报告的错误。

我尝试删除 ScrollView 之前的 VerticalStackLayout，但滚动仍然不起作用。

<ContentPage.Content>

<VerticalStackLayout>
    <VerticalStackLayout HorizontalOptions="Center">
        <Image Source="add.png">
           <ImageGestureRecongnizers>
               <TapGestureRecognizer... Code to add new item to MyCollection...]/>
           </ImageGestureRecognizers>
        </Image>
    </VerticalStackLayout>
    <ScrollView>
        <CollectionView ItemsSource="{Binding MyCollection}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    [Layout for displaying items in MyCollection...]
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ScrollView>
<VerticalStackLayout


</ContentPage.Content>

我非常感谢有关解决方法的建议，以允许查看可滚动列表并通过点击页面上始终可见的对象（按钮或图像）将项目添加到列表中，无论列表如何滚动。

Answer 1

实际上对于 Xaml，这会起作用......

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="MauiAppTest01.MainPage">

<Grid RowDefinitions="30,*">

        <CollectionView ItemsSource="{Binding MyCollection}"
Grid.Row="1">

            <CollectionView.ItemTemplate>

                <DataTemplate>

                    <VerticalStackLayout  >

                        <Label Text="{Binding Name}" FontSize="Large" />


                    </VerticalStackLayout>


                </DataTemplate>

            </CollectionView.ItemTemplate>

        </CollectionView>


    <Image Source="dotnet_bot.png" HeightRequest="100" WidthRequest="100" 
 Margin="0,0,50,20">

        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
        </Image.GestureRecognizers>

    </Image>
</Grid>

调整图像的 RowDefinition(30)！ 抱歉，如果我的代码不整洁，因为我在移动设备上。

Answer 2

我最终在页面右下角创建了一个“奇特”的浮动按钮：

• 创建单行网格
• 将 CollectionView 和 Image 放在一行中
• 在 CollectionView 之后定义图像，以便图像位于 CollectionView 之上

根据 Jason 的建议，我还摆脱了 ScrollView。

<ContentPage.Content>

    <Grid
        <CollectionView ItemsSource="{Binding MyCollection}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    [Layout for displaying items in MyCollection...]
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        <Image Source="add.png"  HeightRequest="40" HorizontalOptions="End"
            VerticalOptions="End" Margin="0,0,50,20">
           <ImageGestureRecongnizers>
               <TapGestureRecognizer... Code to add new item to MyCollection...]/>
           </ImageGestureRecognizers>
        </Image>
    </Grid>


</ContentPage.Content>

Answer 3

如果您想允许查看

scrollable list

并通过点击图像将项目添加到列表中，您只需用 Grid 包裹它们即可。

以下是代码片段供您参考：

XAML：

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppTest01.MainPage">

    <Grid>

            <CollectionView ItemsSource="{Binding MyCollection}">

                <CollectionView.ItemTemplate>

                    <DataTemplate>

                        <VerticalStackLayout  >

                            <Label Text="{Binding Name}" FontSize="Large" />


                        </VerticalStackLayout>


                    </DataTemplate>

                </CollectionView.ItemTemplate>

            </CollectionView>


        <Image Source="dotnet_bot.png" HeightRequest="100" WidthRequest="100" HorizontalOptions="End" VerticalOptions="End" Margin="0,0,50,20">

            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>

        </Image>
    </Grid>


</ContentPage>

隐藏代码：

public partial class MainPage : ContentPage 
{

    public ObservableCollection<MyModel> MyCollection { get; set; }
    
    public MainPage()
    {
            InitializeComponent();

            MyCollection = new ObservableCollection<MyModel>
            {

               new MyModel{ Name="1"},

               new MyModel{ Name="2"},

             };

             BindingContext = this;
     }



    private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {

        for (int i = 0; i < 10; i++) {
            MyCollection.Add(new MyModel { Name = i+"" });
        }
        
    }
}

型号：

    public class MyModel 
    {
        public string Name { get; set; }
    }

Answer 4

我有一个类似的问题，我没有看到垂直滚动条。我 发现如果我将包含 CollectionView 的网格中的行高度从“自动”设置为“*”，它就解决了问题。