Question

我正在尝试在Androd上获得如下类似的弹出窗口，看到X关闭按钮很好地放在框架的顶部。我复制了github中的代码进行测试，但实际代码也无效。按钮的一半总是在框架后面。我认为第一个增加的控制在下面，如果他们的位置相互叠加，第二个控制在上面。这里有例外吗？无论我尝试什么，我都无法设置按钮，从而对框架进行操作有人可以在这里阐明绝对布局的用法吗？

 <ScrollView
    HorizontalOptions="Center"
    VerticalOptions="Center">
    <AbsoluteLayout>
      <Frame
        x:Name="FrameContainer"
        Margin="15"
        HorizontalOptions="Center"
        BackgroundColor="White">
        <StackLayout
            IsClippedToBounds="True"
            Padding="10, 5"
            Spacing="3">
            <Image
              HorizontalOptions="Center"
              x:Name="OctocatImage"
              Margin="10"
              HeightRequest="150"
              WidthRequest="150">
              <Image.Source>
                <OnPlatform
                  x:TypeArguments="ImageSource"
                  Android="github_octocat.png"
                  iOS="github_octocat.png"
                  WinPhone="Assets/github_octocat.png"/>
              </Image.Source>
            </Image>
            <Entry
              HorizontalOptions="Center"
              x:Name="UsernameEntry"
              Style="{StaticResource EntryStyle}"
              Placeholder="Username" />
            <Entry
              HorizontalOptions="Center"
              x:Name="PasswordEntry"
              Style="{StaticResource EntryStyle}"
              Placeholder="Password"
              IsPassword="True"/>
          <Button
            Margin="10, 5"
            BackgroundColor="#7dbbe6"
            HorizontalOptions="Fill"
            Clicked="OnLogin"
            x:Name="LoginButton"
            Text="Login">
            <Button.HeightRequest>
              <OnPlatform x:TypeArguments="x:Double" Android="50" iOS="30" WinPhone="30"/>
            </Button.HeightRequest>
          </Button>
          </StackLayout>
      </Frame>
      <ContentView
          AbsoluteLayout.LayoutFlags="PositionProportional"
          AbsoluteLayout.LayoutBounds="1, 0, -1, -1">
        <ContentView.GestureRecognizers>
          <TapGestureRecognizer Tapped="OnCloseButtonTapped"/>
        </ContentView.GestureRecognizers>
        <Image
          x:Name="CloseImage"
          HeightRequest="30"
          WidthRequest="30">
          <Image.Source>
            <OnPlatform
              x:TypeArguments="ImageSource"
              Android="close_circle_button.png"
              iOS="close_circle_button.png"
              WinPhone="Assets/close_circle_button.png"/>
          </Image.Source>
        </Image>
      </ContentView>
    </AbsoluteLayout>
  </ScrollView>

我刚试过一个新项目，下面是我的样子。关闭按钮始终位于框架后面。在这里你可以找到repro test project

Answer 1

删除了Frame并将一些属性移到了StackLayout上。相关的bug https://bugzilla.xamarin.com/show_bug.cgi?id=55744

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:test"
             x:Class="test.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="EntryStyle" TargetType="Entry">
                <Setter Property="PlaceholderColor" Value="#9cdaf1"/>
                <Setter Property="TextColor" Value="#7dbbe6"/>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <ScrollView
    HorizontalOptions="Center"
    VerticalOptions="Center">
            <AbsoluteLayout>

                    <StackLayout Margin="15" BackgroundColor="White"
                    IsClippedToBounds="True"
                    Padding="10, 5"
                    Spacing="3">
                        <Image
                          HorizontalOptions="Center"
                          x:Name="OctocatImage"
                          Margin="10"
                          HeightRequest="150"
                          WidthRequest="150">
                            <Image.Source>
                                <OnPlatform
                                  x:TypeArguments="ImageSource"
                                  Android="icon.png"
                                 />
                            </Image.Source>
                        </Image>
                        <Entry
              HorizontalOptions="Center"
              x:Name="UsernameEntry"
              Style="{StaticResource EntryStyle}"
              Placeholder="Username" />
                        <Entry
              HorizontalOptions="Center"
              x:Name="PasswordEntry"
              Style="{StaticResource EntryStyle}"
              Placeholder="Password"
              IsPassword="True"/>
                        <Button
            Margin="10, 5"
            BackgroundColor="#7dbbe6"
            HorizontalOptions="Fill"

            x:Name="LoginButton"
            Text="Login">
                            <Button.HeightRequest>
                                <OnPlatform x:TypeArguments="x:Double" Android="50" iOS="30" WinPhone="30"/>
                            </Button.HeightRequest>
                        </Button>
                    </StackLayout>

                <ContentView
          AbsoluteLayout.LayoutFlags="PositionProportional"
          AbsoluteLayout.LayoutBounds="1, 0, -1, -1">
                    <Image
          x:Name="CloseImage"
          HeightRequest="30"
          WidthRequest="30">
                        <Image.Source>
                            <OnPlatform
              x:TypeArguments="ImageSource"
              Android="close_circle_button.png"
             />
                        </Image.Source>
                    </Image>
                </ContentView>
            </AbsoluteLayout>
        </ScrollView>
    </ContentPage.Content>


</ContentPage>

Answer 2

这是一个错误，请在您的相框上设置 HasShadow =“ False” ，它应该可以工作。

当头寸相同时，AbsoluteLayout不会按预期对齐控件

2 个答案: