phone 和平板电脑的不同布局（1 | 2 列）

Question

我正在尝试根据热设备 phone 或 tablet 在运行时使用不同的布局。

我想在 tablet 上使用 2 列布局，并在 phone 上保留一列布局。

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

预期布局：

Answer 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>

Phone

平板电脑

phone 和平板电脑的不同布局（1 | 2 列）

Different layouts for phone and tablet (1 | 2 columns)

xaml

xamarin

adaptive-design

xamarin.forms