Xamarin 堆栈布局重叠部分

Question

我是 Xamarin 的新手，我正在尝试创建一个表单。

当没有包含其他堆栈布局时，第一个堆栈布局显示正常http://prntscr.com/os7703

添加第二个堆栈布局后，我得到了这个 http://prntscr.com/os733e

这是我正在使用的代码：

<ContentPage.Content>
        <StackLayout>
            <grial:TabControl>
                <grial:TabItem Text="Fuel Setup">
                    <Grid>
                        <StackLayout Margin="10,10,10,10" HeightRequest="60" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                            <Stepper Maximum="360" Increment="1" HorizontalOptions="Center" ValueChanged="Stepper_ValueChanged" VerticalOptions="StartAndExpand" />
                            <Label x:Name="lblGallons" Text="Gallons" />
                            <Entry x:Name="txtGallons" WidthRequest="130" />
                        </StackLayout>
                        <StackLayout HorizontalOptions="FillAndExpand" HeightRequest="300">
                            <Editor x:Name="txtNotes" VerticalOptions="Center" />
                        </StackLayout>-->
                    </Grid>
                </grial:TabItem>
            </grial:TabControl>
        </StackLayout>
    </ContentPage.Content>

我是否需要每个视图只有一个堆栈布局，或者其他 "guilty" 以获得重叠控件？

Answer 1

如果您只想垂直堆叠您的项目，只需 StackLayout 而不是 grid

<StackLayout>
  <StackLayout Margin="10,10,10,10" HeightRequest="60" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
    <Stepper Maximum="360" Increment="1" HorizontalOptions="Center" ValueChanged="Stepper_ValueChanged" VerticalOptions="StartAndExpand" />
    <Label x:Name="lblGallons" Text="Gallons" />
    <Entry x:Name="txtGallons" WidthRequest="130" />
  </StackLayout>
  <StackLayout HorizontalOptions="FillAndExpand" HeightRequest="300">
    <Editor x:Name="txtNotes" VerticalOptions="Center" />
  </StackLayout>-->
</StackLayout>

Answer 2

如果您想在 Grid 中进行此布局，请尝试以下代码。

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="55" ></RowDefinition>
            <RowDefinition Height="55" ></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="180"></ColumnDefinition>
            <ColumnDefinition Width="50"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Stepper Grid.Row="0" Grid.Column="0"  Maximum="360" Increment="1" HorizontalOptions="Center" VerticalOptions="StartAndExpand"/>
        <Label Grid.Row="0" Grid.Column="1" x:Name="lblGallons" Text="Gallons" />
        <Entry Grid.Row="0" Grid.Column="2" x:Name="txtGallons" WidthRequest="50" />
        <Editor Grid.Row="1" Grid.Column="0" x:Name="txtNotes" VerticalOptions="Center"></Editor>
    </Grid>

注意：使用Grid时，需要先用RowDefinition和ColumnDefinition定义行和列。然后使用Grid.Row和Grid.Column指定行和列。

Xamarin 堆栈布局重叠部分

Xamarin stack layout overlapping sections

xamarin

xamarin.forms

stacklayout