手机和平板电脑的不同布局（1 | 2 列）[关闭]答案

【问题标题】：Different layouts for phone and tablet (1 | 2 columns) [closed]手机和平板电脑的不同布局（1 | 2 列）[关闭]
【发布时间】：2021-03-06 08:24:23
【问题描述】：

我正在尝试根据热门设备手机或平板电脑在运行时使用不同的布局。

我想在平板电脑上使用 2 列布局，而在手机上保持单列布局。

我还希望有一些控件在桌面设备上跨越 2 列，而在手机设备上布局应该是单列，我的意思是要显示许多元素（3/4 整页高度...... )。

预期布局：

【问题讨论】：

您可以使用 FlexLayout，尽管您无法进行精确控制。我可能会使用 Idiom 的运行时检查在后面的代码中构建布局。
另一个想法是在单独的 XAML 文件中指定您的页面，然后在运行时使用相同的 Idiom 检查想法加载正确的页面。尽管这可能很难维护，除非您将所有组件抽象到内容视图中，否则可能会有很多重复。

标签： xaml xamarin xamarin.forms adaptive-design

【解决方案1】：

您可以利用OnIdiom 来实现它，这是xaml 中的一个示例：（还要注意ColumnDefinitions 和RowDefinitions 的新简化语法）

<Grid RowDefinitions="*,*,*,*,*,*,*,auto"
      ColumnDefinitions="50*,50*">

<BoxView BackgroundColor="Red"
             Grid.Row="0"
             Grid.Column="0"
             Grid.ColumnSpan="2"/>

    <BoxView BackgroundColor="YellowGreen"
             Grid.Row="1"
             Grid.Column="0"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>

    <BoxView BackgroundColor="Aqua"
             Grid.Row="{OnIdiom Phone=2,
                                Tablet=1}"
             Grid.Column="{OnIdiom Phone=0,
                                   Tablet=1}"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>

    <BoxView BackgroundColor="Bisque"
             Grid.Row="{OnIdiom Phone=3,
                                Tablet=2}"
             Grid.Column="0"
             Grid.ColumnSpan="2"/>

    <BoxView BackgroundColor="Purple"
             Grid.Row="{OnIdiom Phone=4,
                                Tablet=3}"
             Grid.Column="0"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>

    <BoxView BackgroundColor="Blue"
             Grid.Row="{OnIdiom Phone=4,
                                Tablet=3}"
             Grid.Column="{OnIdiom Phone=0,
                                   Tablet=1}"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>

    <BoxView BackgroundColor="DimGray"
             Grid.Row="{OnIdiom Phone=6,
                                Tablet=4}"
             Grid.Column="0"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>

    <BoxView BackgroundColor="HotPink"
             Grid.Row="{OnIdiom Phone=7,
                                Tablet=4}"
             Grid.Column="{OnIdiom Phone=0,
                                   Tablet=1}"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>
</Grid>

电话

平板电脑

【讨论】：