如何在xamarin表单的Flex布局中从一开始就对齐项目?

hwamh0ep  于 2023-09-28  发布在  其他
关注(0)|答案(3)|浏览(140)

我用的是xamarin forms V3.3.0。我无法从一开始就对齐flex布局最后一行中的项目。我尝试使用这些属性组合,Direction=“Row”Wrap=“Wrap”JustifyContent=“Center”AlignContent=“Start”AlignItems=“Start”。在下面添加代码和图像。

<FlexLayout Direction="Row"  Wrap="Wrap" Margin="5" JustifyContent="Center"  AlignContent="Start"  AlignItems="Start">
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>            
        </FlexLayout>

vlju58qv

vlju58qv1#

对于最后一行的这些项,JustifyContent="Center"是将所有项移动到中心。
您可以尝试使用JustifyContent="Start"

pvcm50d1

pvcm50d12#

您需要将flexlayout更改为:

<FlexLayout WidthRequest="330" HorizontalOptions="Center"  Wrap="Wrap" Margin="5">

jyztefdp

jyztefdp3#

JustifyContent="Start"导致右侧出现空格。我解决了空格问题,如下所示:首先,你需要确定你想要在屏幕上显示多少帧,例如,假设有3列,然后我们可以根据screenWidht/3来安排帧宽度,这样我们就可以使用Xamarin.Essentials来计算。你可以在构造函数中将FrameWidthValue绑定到FrameWidth。

double screenWidth = DeviceDisplay.MainDisplayInfo.Width;     
       double density = DeviceDisplay.MainDisplayInfo.Density;
       DisplayOrientation orientation = DeviceDisplay.MainDisplayInfo.Orientation;

     
           FrameWidthValue = (((screenWidth / density)) * 1 / 3);

通过这种方式,产生了类似于网格但比网格更响应的解决方案。

相关问题