Xamarin.forms 中的响应式网格

Posted 2023-03-12

【中文标题】Xamarin.forms 中的响应式网格

【英文标题】：Responsive grid in Xamarin.forms

【发布时间】：2016-02-09 06:36:28

【问题描述】：

参考my previous question，我需要一些帮助，让列表视图项目在所有平台、所有尺寸以及横向和纵向模式下都能响应。我现在拥有的列表视图在 10" 屏幕上变得很小。我想让它响应。任何参考来实现这一点？

【问题讨论】：

如果您仍然需要关于背景颜色更改的帮助，请删除最后一个问题并发布另一个问题，因为您应该只问一个问题。

@Pete 好的，我会这样做的

【参考方案1】：

如果您的ListView 很小并且没有覆盖整个页面，您可能会遇到某种固定宽度问题？

在您的mainList 上，您设置为ContentPage，没有任何布局选项。

尝试先设置外部元素的HorizontalOptions 和VerticalOptions，一旦你开始工作，专注于内部控件，以确保它们之后占用所需的空间量。

        o.HorizontalOptions = LayoutOptions.FillAndExpand;
        o.VerticalOptions = LayoutOptions.FillAndExpand;

将ListView BackgroundColor 更改为一些明显的颜色，以帮助您确保布局正确。

【讨论】：

列表视图覆盖了整个页面。但问题在于行的大小和字体大小。与工具栏项相比，listview 文本和整个高度都很小

你能发过来我看一下吗？它很可能仍然与您内部子项/列表视图项上的 Horizo​​ntalOptions 和 VerticalOptions 有关。

【参考方案2】：

每个 Xamarin.Forms.Element（因此每个页面）都实现了 Width 和 Height 属性，您可以使用它们来根据 Page-Size 调整布局。 您应该在此页面上获取有关 VisualElement 类 https://developer.xamarin.com/api/type/Xamarin.Forms.VisualElement/ 的战利品

您还可以使用 Device.Idiom 来检查您是在手机还是平板电脑上，并单独处理每个案例：

        if (Device.Idiom == TargetIdiom.Phone)
            //your code goes here
        else
            if (Device.Idiom == TargetIdiom.Tablet)
            //your code goes here
        else
            throw new PlatformNotSupportedException();

对于横向/纵向，只需检查页面的宽度/高度属性：

        if (Width > Height)
        
            //"landscape"
        
        else
        
            //"portrait"
        

为了处理方向变化，为 SizeChanged 实现一个事件处理程序或简单地覆盖 OnSizeAllocated (https://developer.xamarin.com/api/member/Xamarin.Forms.VisualElement.OnSizeAllocated/p/System.Double/System.Double/)