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>

使用FlexLayout包装，如何在行之间留出空间？

1 个答案: