Xamarin Forms 相对布局不会堆叠
Xamarin Forms Relative Layout won't stack
使用以下代码:
<ScrollView Orientation="Vertical" Padding="0">
<RelativeLayout BackgroundColor="Red" Padding="0">
<BoxView Color="Blue" WidthRequest="100" HeightRequest="100"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
</RelativeLayout>
<RelativeLayout BackgroundColor="Green" Padding="0">
<BoxView Color="Yellow" WidthRequest="100" HeightRequest="100"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
</RelativeLayout>
</ScrollView>
但由于某种原因,每个新的相对布局都像这样占据了整个屏幕,而不是堆叠:
为什么它们不能垂直堆叠?堆栈布局通常只会在垂直或水平方向上采用其子元素的组合高度,但相对布局不会发生这种情况。我错过了什么?
试试这个布局。我在 ScrollView 中添加了 StackLayout,在 RelativeLayouts 中添加了 VerticalOptions="Start"。
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TestChat.ChatPage">
<ContentPage.Content>
<ScrollView Orientation="Vertical" Padding="0">
<StackLayout>
<RelativeLayout BackgroundColor="Red" Padding="0" VerticalOptions="Start">
<BoxView Color="Blue" WidthRequest="100" HeightRequest="100"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
</RelativeLayout>
<RelativeLayout BackgroundColor="Green" Padding="0" VerticalOptions="Start">
<BoxView Color="Yellow" WidthRequest="100" HeightRequest="100"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
</RelativeLayout>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
使用以下代码:
<ScrollView Orientation="Vertical" Padding="0">
<RelativeLayout BackgroundColor="Red" Padding="0">
<BoxView Color="Blue" WidthRequest="100" HeightRequest="100"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
</RelativeLayout>
<RelativeLayout BackgroundColor="Green" Padding="0">
<BoxView Color="Yellow" WidthRequest="100" HeightRequest="100"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
</RelativeLayout>
</ScrollView>
但由于某种原因,每个新的相对布局都像这样占据了整个屏幕,而不是堆叠:
为什么它们不能垂直堆叠?堆栈布局通常只会在垂直或水平方向上采用其子元素的组合高度,但相对布局不会发生这种情况。我错过了什么?
试试这个布局。我在 ScrollView 中添加了 StackLayout,在 RelativeLayouts 中添加了 VerticalOptions="Start"。
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TestChat.ChatPage">
<ContentPage.Content>
<ScrollView Orientation="Vertical" Padding="0">
<StackLayout>
<RelativeLayout BackgroundColor="Red" Padding="0" VerticalOptions="Start">
<BoxView Color="Blue" WidthRequest="100" HeightRequest="100"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
</RelativeLayout>
<RelativeLayout BackgroundColor="Green" Padding="0" VerticalOptions="Start">
<BoxView Color="Yellow" WidthRequest="100" HeightRequest="100"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
</RelativeLayout>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>