只有第一个表单在 Xamarin.Forms Android 中的 StackLayout 中工作答案

【问题标题】：Only first form working inside StackLayout in Xamarin.Forms Android只有第一个表单在 Xamarin.Forms Android 中的 StackLayout 中工作
【发布时间】：2020-06-10 01:36:00
【问题描述】：

我在 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 > Frame > StackLayout > Pickers - 只有第一个选择器有效

我尝试尝试将第二个 StackLayout 的方向设置为水平，所有选择器都可以正常工作，但这不是我想要实现的外观。

我尝试了 StackLayout > Pickers 之类的结构 - 一切正常，但我需要将选择器包装在一个框架中以用于 UI 目的。 StackLayout > Frame > Pickers 没有提供所需的输出。

This is a screenshot of the issue

【问题讨论】：

您的网格可能有问题，您可以发布完整的网格吗？
@Adlorem 我已经添加了完整的代码。谢谢。
正如@Adlorem 在Grid 中提到的一个问题。将Grid.RowSpan = 4 设置为StackLayout 覆盖Picker。或更改RowDefinitions。检查它是否有帮助。

标签： xaml xamarin.forms

【解决方案1】：

正如 Adlorem 所说，问题出在网格上。由于 Grid 将根据给定的行定义拆分视图大小。您提到了 5 行的 * 。所以它将整个视图大小分成 5 个相等的大小。但是您只放置了元素的两行。所以它显示在这两行大小内。

根据您的要求，按 Auto 或指定大小（如果已知）拆分大小。或者将您的根网格放入 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>

现在您的视图将如下所示，

【讨论】：

我现在明白了，我是 XAML 的新手，我认为 * 的意思是扩展内容。谢谢！

【解决方案2】：

只是添加@Aldorem 的评论和@Ganesh 的回答

Grid 的 Row 定义是这里问题的根本原因。 Picker 与下方的 Grid 行重叠。

建议：

1) 如果您想将 Grid 拆分成行比例高度（即 1:4），则将 RowDefinition 的高度设置如下

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="4*"/>
    </Grid.RowDefinitions>
</Grid>

2) 如果需要，请保持 Grid 的 RowDefinition 不变（根据您的 UI，我没有发现任何必要性）并将 Grid.RowSpan 设置为 4。

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

3) 将第一个 RowDefinition 的高度设置为 Auto，第二个用于填充剩余部分。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
</Grid>

希望对你有帮助！！

【讨论】：

感谢您进一步阐述这一点！