Xamarin Forms 宽度按预期表现答案

【问题标题】：Xamarin Forms width behave as expectedXamarin Forms 宽度按预期表现
【发布时间】：2020-05-18 17:15:39
【问题描述】：

（已编辑，见下文）

我想在 Xamarin Forms 中定义嵌入在 FlexLayout 中的组件宽度，但它的行为与我所期望的不同：

1) 我得到的全屏宽度与组件填充屏幕所需的宽度不同。

根据 Xamarin，我的 OnePlus 6 密度为 2.625，宽度为 1080 像素，这使我的 DP 宽度为 ca。 411. 当我检查根布局的宽度（覆盖 100% 的屏幕宽度）时，它也是 ca。 411 所以我假设计算是正确的。

        double density = DeviceDisplay.MainDisplayInfo.Density;
        double screenWidth = DeviceDisplay.MainDisplayInfo.Width;
        double tileWidth = screenWidth / density;

当我如下定义我的 xaml 时：

        <FlexLayout AlignItems="Start" JustifyContent="Start"  Wrap="Wrap" AlignContent="Start" BackgroundColor="Yellow">
            <Frame HeightRequest="50" WidthRequest="411" BackgroundColor="#66DC1A" BorderColor="Red">
                <RelativeLayout>
                    <Label Text="TEST"/>
                </RelativeLayout>
            </Frame>
        </FlexLayout>

...然后我输入 411（或使用 Binding 来获取值）这里似乎一切都是正确的，因为组件的边框在所有方面都是可见的。但显然组件永远不会超出屏幕的边界，因为如果我输入 1000 的宽度，它看起来会完全一样。试图弄清楚实际的 100% 是多少，我一步一步接近它，结果是 371。

所以第一个混淆：屏幕宽度应该是 411，组件达到 100% 与 371

2) 获得三分之一的宽度并不是屏幕上的三分之一

假设 371 DP 是我 100% 的屏幕，如果我想连续放置 3 个组件并将组件的宽度计算为 371（约 123）的三分之一，则显示的组件很多大于屏幕的三分之一。并且没有定义的边距、填充或边框会产生如此巨大的差异。我再次做了一个近似值，允许我在一行中放置 3 个组件的宽度是 97（而不是计算出的 123）。逆向计算，根据这个结果，100% 应该是 291 而不是 371

第二个困惑：计算宽度的一小部分不会为显示的组件产生相同的结果

为了稍微可视化它，我让它绘制了以下 xaml，这导致了下面的设计：

    <ContentPage.Content>
    <StackLayout x:Name="mainLayout">
        <FlexLayout AlignItems="Start" JustifyContent="Start"  Wrap="Wrap" AlignContent="Start" BackgroundColor="Yellow">
            <Frame HeightRequest="50" WidthRequest="1000" BackgroundColor="#66DC1A" BorderColor="Red">
                <RelativeLayout>
                    <Label Text="1000"/>
                </RelativeLayout>
            </Frame>
            <Frame HeightRequest="50" WidthRequest="371" BackgroundColor="#66DC1A" BorderColor="Red">
                <RelativeLayout>
                    <Label Text="371"/>
                </RelativeLayout>
            </Frame>
            <Frame HeightRequest="50" WidthRequest="291" BackgroundColor="#66DC1A" BorderColor="Red">
                <RelativeLayout>
                    <Label Text="291"/>
                </RelativeLayout>
            </Frame>
            <Frame HeightRequest="50" WidthRequest="97" BackgroundColor="#66DC1A" BorderColor="Red">
                <RelativeLayout>
                    <Label Text="97"/>
                </RelativeLayout>
            </Frame>
            <Frame HeightRequest="50" WidthRequest="97" BackgroundColor="#66DC1A" BorderColor="Red">
                <RelativeLayout>
                    <Label Text="97"/>
                </RelativeLayout>
            </Frame>
            <Frame HeightRequest="50" WidthRequest="97" BackgroundColor="#66DC1A" BorderColor="Red">
                <RelativeLayout>
                    <Label Text="97"/>
                </RelativeLayout>
            </Frame>

            <Frame HeightRequest="50" WidthRequest="291" BackgroundColor="#66DC1A" BorderColor="Red">
                <RelativeLayout>
                    <Label Text="291"/>
                </RelativeLayout>
            </Frame>
        </FlexLayout>
        <FlexLayout AlignItems="End" JustifyContent="End"  Wrap="Wrap" AlignContent="Start" BackgroundColor="orange">
            <Frame HeightRequest="50" WidthRequest="40" BackgroundColor="#66DC1A" BorderColor="Red">
                <RelativeLayout>
                    <Label Text="40"/>
                </RelativeLayout>
            </Frame>
        </FlexLayout>
        <AbsoluteLayout BackgroundColor="blue">
            <Frame HeightRequest="50" WidthRequest="160" BackgroundColor="#66DC1A" BorderColor="Red">
                <RelativeLayout>
                    <Label Text="TEST"/>
                </RelativeLayout>
            </Frame>
            <Frame HeightRequest="50" WidthRequest="80" BackgroundColor="#66DC1A" BorderColor="Red">
                <RelativeLayout>
                    <Label Text="TEST"/>
                </RelativeLayout>
            </Frame>
            <Frame HeightRequest="50" WidthRequest="40" BackgroundColor="#66DC1A" BorderColor="Red">
                <RelativeLayout>
                    <Label Text="TEST"/>
                </RelativeLayout>
            </Frame>
            <Frame HeightRequest="50" WidthRequest="20" BackgroundColor="#66DC1A" BorderColor="Red">
                <RelativeLayout>
                    <Label Text="TEST"/>
                </RelativeLayout>
            </Frame>
            <Frame HeightRequest="50" WidthRequest="10" BackgroundColor="#66DC1A" BorderColor="Red">
                <RelativeLayout>
                    <Label Text="TEST"/>
                </RelativeLayout>
            </Frame>
        </AbsoluteLayout>
    </StackLayout>
</ContentPage.Content>

在第一部分中，我只是绘制了一些具有指定宽度的组件，用于描述我的问题。第二个块（橙色）仅显示我需要另一个 40 DP 的组件来填充 291 块旁边的屏幕

第三块显示宽度不是线性的。我在彼此的顶部绘制了多个具有以下宽度（从下到上）的块：160、80、40、20、10。再一次：不要混淆，所有显示的组件都有相同的起点（左）并位于互相顶。

我做错了什么，如何可靠地计算组件的宽度？有什么我想念的吗？我希望有人能在这里启发我一点:)

提前致谢。

编辑好吧，有时你需要退后一步才能再次看清。似乎有一个默认偏移量为 40 DP for Frames 添加到宽度中。这意味着当我将宽度设置为 1 时，实际宽度将为 41。这种行为似乎是一致的，我可以使用它。

【问题讨论】：

标签： c# xaml xamarin.forms

【解决方案1】：

事实上Frame 类是一个布局，用于包装带有边框的视图，可以配置颜色、阴影和其他选项。

默认情况下它有一个边框（左：20，上：20，右：20，下：20）。所以你认为框架的默认偏移量是40 DP，它被添加到宽度中。

例如，您可以对其进行测试：

 <Frame x:Name="frame" HeightRequest="50" WidthRequest="291" BackgroundColor="#66DC1A" BorderColor="Red">
            <RelativeLayout>
                <Label Text="291"/>
            </RelativeLayout>
 </Frame>
 <Button Text="click" Clicked="Button_Clicked"></Button>

然后在您的 page.xaml.cs 中：

private void Button_Clicked(object sender, EventArgs e)
    {
        var w = frame.Width;  // w = 331
        var l = fram0.Padding;// you could the board thickness line below

    }

l = Left=20, Top=20, Right=20, Bottom=20, HorizontalThickness=40, VerticalThickness=40

【讨论】：