Question

我正试图在我的应用程序的左下角找到我的浮动操作按钮。

目前它看起来像这样：

我希望它看起来像这样：

我的XAML代码：

<?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:xxx;assembly=xxx"
         x:Class="xxx.xxx.xxx.xxxx"> 

 <AbsoluteLayout HorizontalOptions="FillAndExpand"  VerticalOptions="FillAndExpand">

    <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">

        <StackLayout Orientation="Vertical" VerticalOptions="StartAndExpand">
            <StackLayout HorizontalOptions="CenterAndExpand"  Margin="0,15,0,0" Orientation="Vertical">
                <!--<local:CustomImage Source="logo.png" HeightRequest="100" WidthRequest="100" HorizontalOptions="Center" />-->

                <local:CustomImageButton  WidthRequest="150" Image="Foto.png" ClassId="Eigendommen" x:Name="buttonFoto" HeightRequest="150"/>

            </StackLayout>

            <StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand" Margin="10,0,0,0" x:Name="MainStack" >
                <BoxView BackgroundColor="#F15A35" HeightRequest="1" WidthRequest="400" Margin="0,-2,0,5" />
                <Label Text="Toegevoegd:" FontSize="Medium" FontAttributes="Bold" />
                <StackLayout Orientation="Horizontal">
                    <StackLayout Orientation="Vertical"  IsVisible="False" Margin="10,0,10,0" x:Name="hideImage1">
                        <local:CustomImage HeightRequest="100" WidthRequest="100"/>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
                            <local:CustomImageButton Image="close_zwart.png" BackgroundColor="White" Clicked="Hide_Image_Click" HeightRequest="40" WidthRequest="40" />
                        </StackLayout>
                    </StackLayout>
                    <StackLayout Orientation="Vertical" Margin="10,0,10,0" x:Name="hideImage2" IsVisible="False">
                        <local:CustomImage HeightRequest="100" WidthRequest="100"/>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
                            <local:CustomImageButton Image="close_zwart.png" Clicked="Hide_Image_Click" BackgroundColor="White" HeightRequest="40" WidthRequest="40" />
                        </StackLayout>
                    </StackLayout>
                    <StackLayout Orientation="Vertical" Margin="10,0,10,0" x:Name="hideImage3" IsVisible="False">
                        <local:CustomImage HeightRequest="100" WidthRequest="100"/>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
                            <local:CustomImageButton Image="close_zwart.png" Clicked="Hide_Image_Click" BackgroundColor="White" HeightRequest="40" WidthRequest="40" />
                        </StackLayout>
                    </StackLayout>
                </StackLayout>

            </StackLayout>

        </StackLayout>

    </StackLayout>

    <StackLayout 
             AbsoluteLayout.LayoutFlags="All"
             AbsoluteLayout.LayoutBounds="1,1,0.25,0.25">

        <StackLayout HorizontalOptions="End" VerticalOptions="End" Margin="0,0,0,0">
            <local:FloatingActionButton Image="checktaak.png" x:Name="insertTaak"  HeightRequest="60" WidthRequest="60" />
        </StackLayout>

    </StackLayout>

</AbsoluteLayout>

</ContentPage>

你可以在所有代码（最后一个stacklayout）的底部找到我的浮动动作按钮。如果您需要更多代码，请在评论中告诉我。修改我希望按钮始终存在，即使它与其他stacklayout重叠

Answer 1

发现它！

只需稍微调整布局边界，我不知道我可以超过1。这是我对包含fab的stacklayout的新布局：

values = [[1, 2], [3, 4, 5]]

Answer 2

假设FloatingActionButton继承自Button，而AbsoluteLayout是ContentPage的子元素，并且浮动按钮的预期边距从右边和右边分别为（15,15）底边框，

<AbsoluteLayout>
    <!-- SOME OTHER ELEMENTS -->

    <local:FloatingActionButton Image="checktaak.png"
                                CornerRadius="30"
                                WidthRequest="60" HeightRequest="60"
                                AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="1,1,75,75"
                                HorizontalOptions="Center" VerticalOptions="Center" />
</AbsoluteLayout>

要注意

使用AbsoluteLayout.LayoutFlags="PositionProportional"进行仅定位成比例

然后将AbsoluteLayout.LayoutBounds的{{1}}和X，1和1设置为将其推到右下角。 Y和Width已设置分别设置为75和75，以将元素定位到布局的左侧75 右边框和布局底边框的顶部75个点。

75的计算方式为

Height
由于60(element width/height request) + 15(right/bottom margin) = 75和WidthRequest为60，因此其中一半为30 将是元素的HeightRequest。

XAML代码将按钮放在右下角

2 个答案:

要注意