XAML 只有第一个表单在Xamarin的StackLayout中工作,表单Android

pieyvz9o  于 2022-12-07  发布在  Android
关注(0)|答案(2)|浏览(128)

我用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

hyrbngr7

hyrbngr71#

只是补充一下@Aldorem的评论和@Ganesh的回答
网格的行定义是此处问题的根本原因。选取器与下面的网格行重叠。
建议:
1.如果要将网格按比例高度(即1:4)拆分为多行,请按如下方式设置RowDefinition的高度
2)如果需要的话,保持你的Grid的RowDefinition不变(根据你的UI,我没有发现任何必要),并将Grid.RowSpan设置为4。

<StackLayout Grid.Row="1" Grid.RowSpan="4"/>

1.将第一个RowDefinition的Height设置为Auto,并将第二个设置为填充剩余内容。

shyt4zoc

shyt4zoc2#

正如Adlorem所提到的,问题是网格。因为网格将根据给定的行定义来分割视图大小。您提到了5行的 *。所以它将整个视图大小分割为5个相等的大小。但是您只放置了元素的两行。所以它显示在这两行大小内。
根据您的需求,以自动或指定大小(如果已知)分割大小。或者将您的根网格放入ScrollView,

<Grid>
    <!-- Root Grid definitions -->
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </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>

现在,您的视图将如下所示:

相关问题