实现列表视图的浮动操作按钮 bottom_right - Xamarin.forms

Question

我有一个绑定图像和文本的列表视图。我一直在尝试在此页面的右下角添加一个浮动按钮，但无济于事。做了一些研究，但似乎仍然没有明确的解决方案。谁知道我可以如何实现这个？在我的 xaml 代码中，我展示了我尝试过的内容。

我的 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"
                 x:Class="LoyaltyWorx.Page1"
                 Title="Stores">
        <ContentPage.ToolbarItems>

            <ToolbarItem Text="About" 
                         Icon="ic_action_more_vert.png"
                         Priority="0"
                         Order="Secondary"
                         Clicked="ToolbarItem_Clicked"/>

            <ToolbarItem Text="Settings"
                         Icon="ic_action_more_vert.png"
                         Priority="0"
                         Order="Secondary"/>

        </ContentPage.ToolbarItems>


        <ListView x:Name="MainListView" HasUnevenRows="True" ItemTapped="MainListView_ItemTapped" SeparatorColor="DarkGray">
            <ListView.ItemTemplate>
                <DataTemplate>

                    <ImageCell ImageSource="{Binding Image}" Text="{Binding Name}" TextColor="Black" />


                </DataTemplate>

            </ListView.ItemTemplate>
        </ListView>

***//here is what I attempted but the image just covers the whole page***
        <Image Source="add.png"
                  VerticalOptions="FillAndExpand"
                  HorizontalOptions="FillAndExpand"
               HeightRequest="0"
               WidthRequest="0"
                  AbsoluteLayout.LayoutBounds="1,.99, 65, 65"
                  AbsoluteLayout.LayoutFlags="PositionProportional" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                  Command="{Binding clickNewCard}"
                  CommandParameter="3" />
            </Image.GestureRecognizers>
        </Image>

    </ContentPage>

Answer 1

这里有很多问题：

1. 如果你设置ContentPage的内容，你必须声明 只有一个元素（因此您应该使用像 StackLayout 这样的布局容器 - 可以处理多个子元素 - 来组成您的页面）。请参阅this topic 了解它；
2. 您正在设置AbsoluteLayout 的附加属性，但您的图像不在AbsoluteLayout 中。 This topic 引领使用 AbsoluteLayout （我想这不是你需要的）。
3. 您将VerticalOptions="FillAndExpand" 和HorizontalOptions="FillAndExpand" 设置为图像视图，而实际上此属性应该在ListView 上。 This topic 是关于 LayoutOptions。

试试这个方法，告诉我它是否适合你：

<?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="LoyaltyWorx.Page1"
             Title="Stores">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="About" 
                     Icon="ic_action_more_vert.png"
                     Priority="0"
                     Order="Secondary"
                     Clicked="ToolbarItem_Clicked"/>
        <ToolbarItem Text="Settings"
                     Icon="ic_action_more_vert.png"
                     Priority="0"
                     Order="Secondary"/>
    </ContentPage.ToolbarItems>
    <Grid>
        <ListView Grid.Column="0" Grid.Row="0"
                  x:Name="MainListView" 
                  HasUnevenRows="True" 
                  VerticalOptions="FillAndExpand"
                  HorizontalOptions="FillAndExpand"
                  ItemTapped="MainListView_ItemTapped" 
                  SeparatorColor="DarkGray">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ImageCell ImageSource="{Binding Image}" 
                               Text="{Binding Name}" 
                               TextColor="Black" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Image Grid.Column="0" Grid.Row="0"
               Source="add.png"
               HorizontalOptions="EndAndExpand"
               VerticalOptions="EndAndExpand"
               Margin="0,0,30,30"
               HeightRequest="0"
               WidthRequest="0" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                  Command="{Binding clickNewCard}"
                  CommandParameter="3" />
            </Image.GestureRecognizers>
        </Image>
    </Grid>
</ContentPage>