如何在Xamarin中创建网格

时间:2019-07-10 02:26:04

标签: xamarin xamarin.forms

我的Xamarin.Forms应用程序中有一个GridLayout,但是我的应用程序网格视图出现问题。所以在这里我想在我的应用程序中获得3个列。但是在我的代码中却不是这样。我希望这里显示的网格中的每个元素:

此处的图片描述: image 1

    <Grid Grid.Row="1" Padding="20" x:Name="genrealsectionforreadonly">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                  <RowDefinition Height="100" />
                  <RowDefinition Height="60" />
                  <RowDefinition Height="120" />
                  <RowDefinition Height="60" />
                  <RowDefinition Height="150" />
                </Grid.RowDefinitions>
                <BoxView Grid.Row="1" Grid.RowSpan="4" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="White" CornerRadius="5">
                  <BoxView.Effects>
                    <effects:ShadowEffect />
                  </BoxView.Effects>
                </BoxView>
                <Label Grid.Row="1" Grid.Column="0" Text="General" FontSize="Small" TextColor="Black" Margin="20,20,0,0" />
                <Grid Grid.Row="1" Grid.RowSpan="5" ColumnSpacing="15" Grid.ColumnSpan="2" Padding="20" RowSpacing="20">
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                  </Grid.ColumnDefinitions>
                  <Grid.RowDefinitions>
                    <RowDefinition Height="30" />
                    <RowDefinition Height="50" />
                    <RowDefinition Height="50" />
                    <RowDefinition Height="50" />
                    <RowDefinition Height="50" />
                    <RowDefinition Height="50" />
                  </Grid.RowDefinitions>
                  <Label Grid.Row="1" Grid.Column="0" Text=" ID Type" FontSize="Small" TextColor="#757575" VerticalOptions="Start"/>
                  <Label x:Name="genrealsectionforreadonlylblIdType" Grid.Row="1" Grid.Column="0" FontSize="Small" TextColor="black" VerticalOptions="End" />

                  <Label Grid.Row="1" Grid.Column="2" Text=" ID Number" FontSize="Small" TextColor="#757575" VerticalOptions="Start"/>
                  <Label x:Name="genrealsectionforreadonlylblIdNumber" Grid.Row="1" Grid.Column="2" FontSize="Small" TextColor="Black" VerticalOptions="End" />

                  <Label Grid.Row="1" Grid.Column="4" x:Name="lblIdNumberNew" Text=" ID Number (New)" FontSize="Small" TextColor="#757575" VerticalOptions="Start"/>
                  <Label x:Name="genrealsectionforreadonlylblOldNic" Grid.Row="1" Grid.Column="4" FontSize="Small" TextColor="Black" VerticalOptions="End" />

                  <Label Grid.Row="2" Grid.Column="0" Text=" Title" FontSize="Small" TextColor="#757575" VerticalOptions="Start"/>
                  <Label x:Name="genrealsectionforreadonlylblTitle" Grid.Row="2" Grid.Column="0" FontSize="Small" TextColor="Black" VerticalOptions="End" />

                  <Label Grid.Row="2" Grid.Column="1" Text=" First name" FontSize="Small" TextColor="#757575" VerticalOptions="Start"/>
                  <Label x:Name="genrealsectionforreadonlylblFname" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" FontSize="Small" TextColor="Black" VerticalOptions="End" />

                  <Label Grid.Row="2" Grid.Column="2" Text=" Last name" FontSize="Small" TextColor="#757575" VerticalOptions="Start"/>
                  <Label x:Name="genrealsectionforreadonlylblLname" Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" FontSize="Small" TextColor="Black" VerticalOptions="End" />

                  <Label Grid.Row="3" Grid.Column="0" Text=" Gender" FontSize="Small" TextColor="#757575" VerticalOptions="Start"/>
                  <Label x:Name="genrealsectionforreadonlylblGender" Grid.Row="3" Grid.Column="0" FontSize="Small" TextColor="Black" VerticalOptions="End" />

                  <Label Grid.Row="3" Grid.Column="1" x:Name="genrealsectionforreadonlylblDobSelector" Text=" Date of birth" FontSize="Small" TextColor="#757575" VerticalOptions="Start"/>
                  <Label x:Name="genrealsectionforreadonlylblDob" Grid.Row="3" Grid.Column="1" FontSize="Small" TextColor="Black" VerticalOptions="End" />

                  <Label Grid.Row="3" Grid.Column="2" Text=" Language" FontSize="Small" TextColor="#757575" VerticalOptions="Start"/>
                  <Label x:Name="genrealsectionforreadonlylblLang" Grid.Row="3" Grid.Column="2" FontSize="Small" TextColor="Black" VerticalOptions="End" />

                  <Label Grid.Row="4" Grid.Column="0" Text=" Nationality" FontSize="Small" TextColor="#757575" VerticalOptions="Start"/>
                  <Label x:Name="lblNationality" Grid.Row="4" Grid.Column="0" FontSize="Small" TextColor="Black" VerticalOptions="End" />

                  <Label Grid.Row="4" Grid.Column="2" Text=" Postal Code" FontSize="Small" TextColor="#757575" VerticalOptions="Start"/>
                  <Label Grid.Row="4" Grid.Column="2" x:Name="genrealsectionforreadonlyPcode" FontSize="Small" TextColor="Black" VerticalOptions="End"/>
                </Grid>
              </Grid>

我不想使用3个色谱柱来做到这一点。请帮助我。

1 个答案:

答案 0 :(得分:0)

我不完全了解三栏的意思。我这样更改了内部网格

const list = (z, bundle) => {
 var email=encodeURIComponent(bundle.authData.email);//Like this
 const promise = z.request('http://mysite/list_data/'+email,
 {
   params: {} 
 });
 return promise.then((response) => response.json);

我有这样的东西。 Screenshot of result