英文:
FlexLayout with DataTemplate alignment
问题
我的问题是这样的。我想使项目在我的弹性布局内对齐，就像这样（谈论图片）：
[](https://i.stack.imgur.com/joNkJ.png)
但我不知道为什么我的代码不起作用。它在处理其他元素时表现正常，但当我将它放在<datatemplate>内时，它就无法正常工作。有没有人知道吗？
这是代码片段：
```xml
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:ImagesJson">
<FlexLayout Wrap="Wrap" Direction="Row" JustifyContent="SpaceEvenly">
<VerticalStackLayout FlexLayout.Basis="40%">
<Image Source="{Binding MainImage}" Aspect="AspectFit" HeightRequest="150"/>
</VerticalStackLayout>
</FlexLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
当前的行为是它将所有图像叠放在一起，而不是并排放置：
<details>
<summary>英文:</summary>
My problem is the following. I would like to make the items align like this inside my flex layout (talking about the pictures):
[](https://i.stack.imgur.com/joNkJ.png)
But I don't know why is my code not working. It works fine with other elements, but it just doesn't work properly when I put this inside <datatemplate>. Is there anybody who would know?
Here is the code snippet:
```xml
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:ImagesJson">
<FlexLayout Wrap="Wrap" Direction="Row" JustifyContent="SpaceEvenly">
<VerticalStackLayout FlexLayout.Basis="40%">
<Image Source="{Binding MainImage}" Aspect="AspectFit" HeightRequest="150"/>
</VerticalStackLayout>
</FlexLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
The current behavior is that it puts all images on top of each other instead of next to each other:
答案1
得分: 1
你可能需要使用BindableLayout来实现，而不是使用CollectionView：
<FlexLayout
Wrap="Wrap"
Direction="Row"
JustifyContent="SpaceEvenly"
BindableLayout.ItemsSource="{Binding YourItemsSource}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Image
Source="{Binding MainImage}"
Aspect="AspectFit" HeightRequest="150"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
你当前的设置过于复杂，可能会导致性能问题，除了你已经遇到的问题外。通常情况下，嵌套这么多布局不是一个好主意。
英文:
You're probably looking for something like this using a BindableLayout instead of a CollectionView:
<FlexLayout
Wrap="Wrap"
Direction="Row"
JustifyContent="SpaceEvenly"
BindableLayout.ItemsSource="{Binding YourItemsSource}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Image
Source="{Binding MainImage}"
Aspect="AspectFit" HeightRequest="150"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
Your current setup is overly complicated and will likely suffer from poor performance apart from the issue you're running into already now. Nesting so many layouts usually isn't a great idea.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论