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

【问题标题】：With a FlexLayout wrap, how can I make a space between rows?使用 FlexLayout 换行，如何在行之间留出空间？
【发布时间】：2018-11-12 15:50:08
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： xamarin xamarin.forms

【解决方案1】：

解决方案：

尝试在您的button 中添加HeightRequest 和/或WidthRequest。

 <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>

【讨论】：