Обходной путь для ScrollView, не прокручивающегося внутри StackLayout в Мауи
У меня есть страница, на которой представлен список элементов в CollectionView в ScrollView. Я хочу, чтобы пользователь мог добавить новый элемент в этот список, нажав кнопку «Добавить» или коснувшись изображения в верхней части страницы. Сначала я попробовал это, используя иерархию представлений, показанную ниже. Приведенный ниже код представляет собой сокращенную версию реального кода. Я обнаружил, что размещение ScrollView в VerticalStackLayout прерывает прокрутку на Мауи! Здесь сообщается об ошибке.
Я попытался удалить VerticalStackLayout, который предшествует ScrollView, но прокрутка по-прежнему не работает.
<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>
Я был бы очень признателен за предложения по обходному пути, позволяющему просматривать прокручиваемый список и добавлять элемент в список, нажав объект (кнопку или изображение), который всегда виден на странице, независимо от того, как прокручивается список.
@ Джейсон - это чертовски хороший вопрос! Я, наверное, не знаю и не понимал, что это не нужно. Серьезная ошибка новичка :(. Попробую без ScrollView.
@Jason - если я уберу ScrollView, который обертывает CollectionView, у меня будет точно такая же проблема. CollectionView не прокручивается.
Вы можете попытаться установить VerticalOptions, чтобы убедиться, что CollectionView заполняет свой контейнер.
Ранее я пробовал «VerticalOptions=FillAndExpand» в ScrollView, и это не сработало. Я только что попробовал это как вариант для CollectionView, и это тоже не сработало. Я смотрю на то, как я мог бы вместо этого создать плавающую кнопку, но я скептически отношусь к тому, что смогу заставить это работать, потому что я думаю, что мне все равно нужно будет обернуть все в какой-то стек, который предотвратит прокрутку моего CollectionView.
Ответы 3
Если вы хотите разрешить просмотр scrollable list и добавлять элементы в список, нажав на изображение, вы можете просто обернуть их сеткой.
Вот фрагмент кода ниже для справки:
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; }
}
Спасибо за это. Однако в вашем предложении изображение dotnet_bot будет прокручиваться с помощью CollectionView. Мое намерение состоит в том, чтобы изображение оставалось в верхней части экрана. Моя проблема не в том, как добавлять элементы в список. Моя проблема заключается в том, как сделать так, чтобы кнопка «Добавить элемент» или изображение оставались неподвижными в верхней части экрана, пока список можно прокручивать.
В итоге я создал «причудливую» плавающую кнопку в правом нижнем углу страницы:
- Создание однорядной сетки
- Помещение CollectionView и Image в одну строку
- Определение изображения после CollectionView, чтобы изображение располагалось поверх CollectionView
Я также избавился от 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>
На самом деле для 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) для изображения! Извините, если мой код неаккуратный, так как я на мобильном телефоне.
CollectionViewпо своей природе прокручивается. Зачем нуженScrollView?