我用XAML创建了一个框架,其中包含表单。如下图所示,有3个Picker字段供用户选择。但是,只有第一个有效。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="LoanApp2.Views.LoanApplication"
Title="Title"
Shell.NavBarHasShadow="False"
>
<ContentPage.ToolbarItems>
<ToolbarItem IconImageSource="icon_dropdown.png"/>
</ContentPage.ToolbarItems>
<!--Root Grid -->
<Grid>
<!-- Root Grid definitions -->
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Blue frame -->
<Frame Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="2" Padding="0" BackgroundColor="#62bef0" HasShadow="False">
<!-- Contains loan history text and desc -->
<StackLayout Grid.Row="1">
<Label Text="LOAN APPLICATION" FontSize="30" VerticalOptions="Center" FontAttributes="Bold" TextColor="White" HorizontalOptions="Center"/>
</StackLayout>
</Frame>
<!-- Contains form -->
<StackLayout Grid.Row="1" Grid.ColumnSpan="3" Orientation="Vertical">
<Frame BackgroundColor="White" Margin="30, 20, 30, 0" Padding="30" CornerRadius="5">
<StackLayout Orientation="Vertical">
<Label Text="Lorem ipsum dolor sit amet, consectetur." TextColor="#62bef0" HorizontalTextAlignment="Center"/>
<Picker Title="Select Loan Type...">
<Picker.Items>
<x:String>Lorem ipsum</x:String>
<x:String>dolor sit amet</x:String>
<x:String>consectetur</x:String>
</Picker.Items>
</Picker>
<Picker Title="Select Loan Class...">
<Picker.Items>
<x:String>adipiscing elit</x:String>
<x:String>Nam gravida mauris</x:String>
<x:String>a velit rhoncus</x:String>
</Picker.Items>
</Picker>
<Picker Title="Select Purpose...">
<Picker.Items>
<x:String>tempor porta vitae</x:String>
<x:String>Nullam ultrices</x:String>
<x:String>aliquam</x:String>
</Picker.Items>
</Picker>
</StackLayout>
</Frame>
</StackLayout>
</Grid>
</ContentPage>
上面的结构是堆栈布局〉框架〉堆栈布局〉拾取器-只有第一个拾取器工作
我尝试了实验,使第二个StackLayout的方向水平,所有的拾取器工作,但这不是我试图实现的外观。
我尝试了一个结构,如StackLayout〉Pickers -一切工作,但我需要 Package 在一个框架中的用户界面的目的拾取器。
This is a screenshot of the issue
2条答案
按热度按时间hyrbngr71#
只是补充一下@Aldorem的评论和@Ganesh的回答
网格的行定义是此处问题的根本原因。选取器与下面的网格行重叠。
建议:
1.如果要将网格按比例高度(即1:4)拆分为多行,请按如下方式设置RowDefinition的高度
2)如果需要的话,保持你的
Grid
的RowDefinition不变(根据你的UI,我没有发现任何必要),并将Grid.RowSpan
设置为4。1.将第一个RowDefinition的Height设置为Auto,并将第二个设置为填充剩余内容。
shyt4zoc2#
正如Adlorem所提到的,问题是网格。因为网格将根据给定的行定义来分割视图大小。您提到了5行的 *。所以它将整个视图大小分割为5个相等的大小。但是您只放置了元素的两行。所以它显示在这两行大小内。
根据您的需求,以自动或指定大小(如果已知)分割大小。或者将您的根网格放入ScrollView,
现在,您的视图将如下所示: