如何解决Xamarin.Forms:如何在2 ScrollLayout上方和之间放置圆形图像
我使用的是 Xamarin.Forms应用,该应用包含基于以下内容的首页:
- 位于屏幕顶部背景的
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"
Padding="0,10,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>
我想在ScrollViews
上方的两个MainContainer
之间显示一个圆圈徽标,如下所示:
但是我还没有成功实现这一目标,我也不知道这是否有可能...
解决方法
您可以尝试使用RelativeLayout来实现。
这是类似的示例代码:
<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 -->
<RelativeLayout>
<Frame CornerRadius="16" x:Name="MainFrame"
Padding="0,10,0"
BackgroundColor="LightBlue"
Grid.Row="1">
<StackLayout BackgroundColor="Transparent"
Spacing="16"
Margin="16">
<!-- Phone container -->
<Frame Padding="16">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="Phone Number" />
<Label Grid.Row="1"
Text="+33 6 20 10 70 40" />
</Grid>
</Frame>
<!-- Other containers -->
</StackLayout>
</Frame>
<BoxView CornerRadius="25"
BackgroundColor="AliceBlue"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=MainFrame,Property=Width,Factor=0.45}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,Property=Y,Constant=-20}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView,Constant=100}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView,Constant=100}" />
</RelativeLayout>
</Grid>
</Grid>
</ScrollView>
效果:
,在容器的同一位置添加圆圈徽标。
<!-- Items 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>
<!-- Container -->
<Frame ...>
<!-- Yoour logo -->
<Frame
Grid.Row="1"
Margin="0,-40,0"
BackgroundColor="Green"
CornerRadius="40"
HeightRequest="40"
HorizontalOptions="Center"
VerticalOptions="Start"
WidthRequest="40" />
</Grid>
</Grid>
</ScrollView>
查看演示
由于我没有使用块状软件包,所以我只用框架替换了煎饼视图。您可以根据需要调整徽标大小和边距。
顺便说一句,您的结构有点复杂或多余,可以是如下所示的4级主要结构:
<Grid x:Name="mainGrid">
<!-- Header view -->
<BoxView (or Image).../>
<!-- Items view -->
<ScrollView ...>
<Grid ...>
<!-- Container -->
<Frame ...>
<!-- logo -->
<Frame (or Image)...>
</Grid>
</ScrollView>
</Grid>
,
谢谢@Shaw和@Junior Jiang-MSFT
有 2个解决方案:有或无 RelativeLayout
。
由@Shaw给出的版本无 RelativeLayout
。
<Grid RowSpacing="0"
BackgroundColor="LightGray"
x:Name="mainGrid">
<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 can be replaced by an Image -->
<BoxView x:Name="headerImage"
HeightRequest="280"
BackgroundColor="Yellow" />
</Grid>
</ContentView>
</ScrollView>
<!-- Content 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>
<!-- Frame Container-->
<Frame x:Name="MainFrame"
CornerRadius="16"
Padding="0,0"
BackgroundColor="LightGray"
Grid.Row="1">
<StackLayout BackgroundColor="Transparent"
Spacing="16" Margin="16,48,16,16">
<!-- Phone Frame -->
<Frame Padding="16">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="Phone Number" />
<Label Grid.Row="1"
Text="+33 6 20 10 70 40" />
</Grid>
</Frame>
<!-- Other Frames -->
<!-- ... -->
</StackLayout>
</Frame>
<!-- No RelativeLayout positioned item -->
<BoxView Grid.Row="1"
CornerRadius="45"
BackgroundColor="DarkBlue"
WidthRequest="90" HeightRequest="90"
VerticalOptions="Start" HorizontalOptions="Center"
Margin="0,-45,0" />
</Grid>
</Grid>
</ScrollView>
</Grid>
</Grid>
带有 RelativeLayout
的版本基于@Junior Jiang-MSFT建议:
<Grid RowSpacing="0"
BackgroundColor="LightGray"
x:Name="mainGrid">
<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 can be replaced by an Image -->
<BoxView x:Name="headerImage"
HeightRequest="280"
BackgroundColor="Yellow" />
</Grid>
</ContentView>
</ScrollView>
<!-- Content 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>
<StackLayout Grid.Row="1">
<RelativeLayout>
<!-- Frame container -->
<Frame x:Name="MainFrame"
CornerRadius="16"
Padding="0,0"
BackgroundColor="LightGray"
Grid.Row="1">
<StackLayout BackgroundColor="Transparent"
Spacing="16" Margin="16,16">
<!-- Phone Frame -->
<Frame Padding="16">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="Phone Number" />
<Label Grid.Row="1"
Text="+33 6 20 10 70 40" />
</Grid>
</Frame>
<!-- Other Frames -->
<!-- ... -->
</StackLayout>
</Frame>
<!-- RelativeLayout positioned item -->
<BoxView CornerRadius="45"
BackgroundColor="DarkBlue"
WidthRequest="90" HeightRequest="90"
VerticalOptions="Center" HorizontalOptions="Center"
RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToParent,Factor=0.5,Constant=-45}"
RelativeLayout.YConstraint="{ConstraintExpression
Type=RelativeToView,Constant=-45}" />
</RelativeLayout>
</StackLayout>
</Grid>
</ScrollView>
</Grid>
</Grid>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。