Maui FlexLayout 需要很大的高度

Question

我正在尝试添加它们在一行中对齐的项目，但是当它们达到最大宽度时，它们会换行。 我已经使用 FlexLayout 和属性“Wrap”来完成此操作，这很好，但我意识到 FlexLayout 的高度比我想要的要大。那是因为我有一个 ScrollView，当我在 FlexLayout 中只有几个项目时它就会激活。更改 FlexLayout 的背景颜色并逐个添加项目，我意识到高度几乎是项目的大小 x 项目的数量，即使它们全部排成一行，高度仍然会增加。 如果我删除“包裹”，过高的高度就会消失，但我想要这个功能。

我提前谢谢你🙏🏾。

这里有一些例子： 黄色是FlexLayout背景

使用一件商品即可正常工作

物品较多时，黄色区域会更大并且滚动会激活

总而言之，我正在寻找一种方法使 FlexLayout 高度适应孩子们的身高。

这是代码：

主要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"
    xmlns:local = "clr-namespace:Vista.Controls.Views"
    x:Class="Vista.MainPage" >

    <ScrollView Orientation="Both">
        <VerticalStackLayout 
            BackgroundColor="Red"
        >
            <FlexLayout x:Name="FlexLayoutControl"
                Wrap="Wrap"
                Direction="Row"
                AlignItems="Start"
                JustifyContent="Start"
                AlignContent="Start"
                BackgroundColor="Yellow"
            
            />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

ContentView（进入 FlexLayout 的块）

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Vista.Controls.Views.FileView">

    <Border Stroke="Black" StrokeThickness="2"
        Padding="10"
        MaximumHeightRequest="100"
        MaximumWidthRequest="200"
        HeightRequest="100"
        WidthRequest="100"
        BackgroundColor="#FF00FF"
    >
        <VerticalStackLayout 
            HorizontalOptions="Fill"
            VerticalOptions="Center"
            >
            <Label x:Name="textoLabel"
                Text="Welcome to .NET MAUI!"
                VerticalOptions="Center" 
                HorizontalOptions="Center" />
        </VerticalStackLayout>
    </Border>
</ContentView>

在 C# 中，我没有太多，只有将 FileView 添加到 FlexLayout 的控件。无论如何我都会把它放在你需要的时候。

C# 主页：

using Vista.Controls.Views;

namespace Vista
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            _reload();
        }

        private void ToolBarItem_Click(object sender, EventArgs e)
        {
            String opcion = "vacío";

            try
            {
                opcion = (sender as ToolbarItem)?.Text ?? "No era ToolbarItem";
            }
            catch (Exception ex)
            {
                opcion = $"Excepcion {ex.Message}";
            }

            switch (opcion)
            {
                case "Añadir":
                    _addOpcion();
                    break;
                case "Modificar":
                    _reload();
                    break;
                case "Eliminar":
                    _limpiar();
                    break;
            }
        }

        private void _addOpcion()
        {
            mainVerticalLayout.Add(
                new FileView()
            );
        }

        private void _reload()
        {
            _limpiar();
            for (int i = 0; i <= 10; i++)
            {
                mainVerticalLayout.Add(
                    new FileView($"Prueba text {i + 1}")
                );
            }
        }

        private void _limpiar()
        {
            mainVerticalLayout.Clear();
        }
    }
}

文件视图 C#：

namespace Vista.Controls.Views;

public partial class FileView : ContentView
{
    public FileView()
    {
        InitializeComponent();
    }


    public FileView(String texto)
    {
        InitializeComponent();
        textoLabel.Text = texto;
    }
}

FlexLayout Wrapping 在向其添加项目时会占用大量高度。我希望它和孩子们一样。

Answer 1

这是我的解决方案。 将 ScrollView 的方向更改为垂直。

<ScrollView Orientation="Vertical">