2.3 布局之Gird(网格)

1. 介绍:

1.1

说到网格，也就是Rows and Columns，主要是对这行(或者列)的宽度和高度的定义。主要有下列三种定义

• Auto：自动适应网格内内容，根据网格内内容自动调整网格大小
• Proportional()：*预留空间
• Absolute：绝对赋值

1.2

Grid.ColumnSpan="2" : 表示占用两列
Grid.RowSpan="2" : 表示占用两行,具体看效果图
ColumnSpacing = "0"
:表示格子的列间距位0

1.3 百分比

• "0.6*"表示宽度是父容器宽度的0.6

<codeView:EHangGrid.ColumnDefinitions>
      <ColumnDefinition Width="0.6*"></ColumnDefinition>
      <ColumnDefinition Width="0.4*"></ColumnDefinition>
    </codeView:EHangGrid.ColumnDefinitions>

2.XML 示例代码

<? xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamlSamples.GridDemoPage" Title="Grid Demo Page">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
    </ContentPage.Padding>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height = "Auto" />
            < RowDefinition Height="*" />
            <RowDefinition Height = "100" />
        </ Grid.RowDefinitions >
        < Grid.ColumnDefinitions >
            < ColumnDefinition Width="Auto" />
            <ColumnDefinition Width = "*" />
            < ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        <Label Text = "Autosized cell" Grid.Row="0" Grid.Column="0" TextColor="White" BackgroundColor="Blue" />
        <BoxView Color = "Silver" HeightRequest="0" Grid.Row="0" Grid.Column="1" />
        <BoxView Color = "Teal" Grid.Row="1" Grid.Column="0" />
        <Label Text = "Leftover space" Grid.Row="1" Grid.Column="1" TextColor="Purple" BackgroundColor="Aqua" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
        <Label Text = "Span two rows (or more if you want)" Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" TextColor="Yellow" BackgroundColor="Blue" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
        <Label Text = "Span two columns" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" TextColor="Blue" BackgroundColor="Yellow" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
        <Label Text = "Fixed 100x100" Grid.Row="2" Grid.Column="2" TextColor="Aqua" BackgroundColor="Red" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
    </Grid>
</ContentPage>  
 

3. 效果图

Paste_Image.png

4. Gird官方介绍链接