Question

我在Xamarin中相对较新，我正在尝试创建一个表单。

当不包括其他堆栈布局时，第一个堆栈布局将显示为OK 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>

每个视图是否只需要一个堆栈布局，或者其他有罪的控件重叠部分？

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>

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

Xamarin堆栈布局重叠部分

2 个答案: