使用 FlexLayout 换行时，如何在行之间留出空间？

Question

我正在使用 FlexLayout 来尝试使按钮环绕。它可以工作，但按钮行之间没有空间。

有谁知道我如何确保之间有空间。这是我正在使用的 XAML，如下所示：

<StackLayout Orientation="Vertical" 
             BackgroundColor="{DynamicResource GridBackgroundColor}" 
             Spacing="0" 
             Padding="20" >
    <FlexLayout x:Name="flexLayout"
        Wrap="Wrap"
        JustifyContent="SpaceAround" >
        <Button BackgroundColor="Silver" Padding="10" Margin="5" Text="Introduction" />
        <Button BackgroundColor="Silver" Padding="10" Margin="5" Text="Learning" />
        <Button BackgroundColor="Silver" Padding="10" Margin="5" Text="Home" />
        <Button BackgroundColor="Silver" Padding="10" Margin="5" Text="Help" />
        <Button BackgroundColor="Silver" Padding="10" Margin="5" Text="Settings" />
        <Button BackgroundColor="Silver" Padding="10" Margin="5" Text="Dictionary" />
        <Button BackgroundColor="Silver" Padding="10" Margin="5" Text="Cards" />

    </FlexLayout>
</StackLayout>

Answer 1

解决方案：

尝试添加HeightRequest和/或WidthRequest您的button.

 <ContentPage.Resources>
            <Style TargetType="Button">
                <Setter Property="HeightRequest" Value="40"></Setter>
                <Setter Property="Margin" Value="5"></Setter>
            </Style>

        </ContentPage.Resources>

        <StackLayout Orientation="Vertical" 
                 BackgroundColor="{DynamicResource GridBackgroundColor}" 
                 Spacing="0" 
                 Padding="20">
            <FlexLayout
                            Wrap="Wrap"
                            JustifyContent="SpaceAround" 
                            Direction="Row">
                <Button BackgroundColor="Silver"   Text="Introduction" />
                <Button BackgroundColor="Silver"  Text="Learning" />
                <Button BackgroundColor="Silver"   Text="Home" />
                <Button BackgroundColor="Silver"   Text="Help" />
                <Button BackgroundColor="Silver"   Text="Settings" />
                <Button BackgroundColor="Silver"  Text="Dictionary" />
                <Button BackgroundColor="Silver"   Text="Cards" />

            </FlexLayout>
        </StackLayout>