【发布时间】：2021-02-24 20:21:10
【问题描述】：
我在一个 Xamarin.Forms 应用 上工作，其中包含一个 HomePage，基于：
-
Image在屏幕顶部背景 -
ScrollView中显示的项目列表
如果列表包含许多信息，ScrollView 可以恢复Image。
看起来像这样：
XAML 如下所示：
<Grid RowSpacing="0"
BackgroundColor="{StaticResource Gray-050}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<!-- Header view -->
<ScrollView>
<ContentView x:Name="headerView"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- the BoxView will be replaced by an Image -->
<BoxView x:Name="headerImage"
HeightRequest="280"
BackgroundColor="Yellow" />
</Grid>
</ContentView>
</ScrollView>
<!-- List view -->
<ScrollView HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid ColumnSpacing="0"
RowSpacing="0"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Main container -->
<yummy:PancakeView CornerRadius="16,16,0,0"
Padding="0,10,0,0"
BackgroundColor="{StaticResource Gray-050}"
Grid.Row="1">
<StackLayout BackgroundColor="Transparent"
Spacing="16" Margin="16">
<!-- Phone container -->
<yummy:PancakeView Style="{StaticResource YummyHomeFrame}"
Padding="16">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Style="{StaticResource HomePageHeaderLabelStyle}"
Text="Phone Number" />
<Label Grid.Row="1"
Style="{StaticResource HomePageLabelStyle}"
Text="+33 6 20 10 70 40" />
</Grid>
</yummy:PancakeView>
<!-- Other containers -->
</StackLayout>
</yummy:PancakeView>
</Grid>
</Grid>
</ScrollView>
</Grid>
</Grid>
我想在 2 个ScrollViews 之间、MainContainer 上方显示一个圆形徽标，如下所示：
但我没有设法做到这一点，我不知道它是否可能......
【问题讨论】：
-
您是否尝试将圆形徽标放在 2 个滚动视图之间并与您的标题一起滚动？如果是这样，我最初的想法是
<ScrollView><Grid><Header ContentView /> <ListView ScrollOrGrid/> <CircleLogo HorizontalOptions="Center" VerticalOptions="Start" Margin="0,100,0,0" /></Grid> </ScrollView>。您应该调整页边距以使其适合页面，只需关注同一级别的标题和列表视图。 -
您好，您的意思是要继续显示圆圈徽标吗？您可以尝试使用 RelativeLayout 来做。 docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/…
-
谢谢@Shaw。是的，我想在 2
ScrollViews之间放置圆形徽标，并使其与列表ScrollView一起滚动，正如我们在 GIF 上看到的那样。您建议我添加另一个 ScrollView 作为主容器，并在主Grid中添加Circle项？我试过这个，我玩过Margins，但是Circle仍然显示在标题中，而不是2Layouts（标题/列表）上方。 -
@JuniorJiang-MSFT 我试过玩
RelativeLayout，但圆圈是静态的：我需要圆圈与ListView一起滚动，正如我们在附加的GIF中看到的那样在描述中。 -
@Gold.strike 您可以将内部控件设置为相对布局来尝试，看看我的答案。
标签： xaml user-interface xamarin.forms scrollview frame