如何使 FloatingActionButton 在 ListView 之上工作并正确定位答案

【问题标题】：How to make a FloatingActionButton work on top of a ListView and position it correctly如何使 FloatingActionButton 在 ListView 之上工作并正确定位
【发布时间】：2019-04-16 18:37:59
【问题描述】：

按照本页示例 - https://devlinduldulao.pro/how-to-create-a-floating-action-button/

，我正在尝试让 SuaveControls.FloatingActionButton 在 ListView 之上工作

我的ListView 在StackLayout 中，所以我决定将它们包装到AbsoluteLayout 中

这里是视图/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:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
             xmlns:local="clr-namespace:DPM.XForms"
             x:Class="DPM.XForms.ProjectListPage" 
             Title="Drive Plus Mobile"
             >
    <AbsoluteLayout>
        <StackLayout Orientation="Vertical" Spacing="1">

            <Label Text="TopBar             ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
            <!-- Project Search/Filter toolbar-->
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
                <Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
                <StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
                    <Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
                </StackLayout>
            </StackLayout>
            <Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />



            <ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <!-- Project Row -->
                            <StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
                                <Button 
                                Image="Colombia.png" 
                                BackgroundColor="White" 
                                HorizontalOptions="Center"
                                VerticalOptions="Center"
                                WidthRequest="54"
                                HeightRequest="54"
                                >
                                </Button>
                                <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                                    <Label 
                                    Text="{Binding Name}" 
                                    TextColor="Black"
                                    Font="Bold,17"
                                    HorizontalOptions="StartAndExpand"
                                    VerticalOptions="Start" 
                                />
                                    <Label 
                                   Text="{Binding Brand}" 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="Start" 
                                />
                                    <Label 
                                   Text=".." 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="End" 
                                />
                                </StackLayout>
                                <Button Text="3"  WidthRequest="44"></Button>
                                <Button Text=">"  WidthRequest="44" BackgroundColor="White" ></Button>

                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
        <views:FloatingActionButton 
            Image="CreateProject.png" 

            WidthRequest="80" 
            HeightRequest="80" 
            HorizontalOptions="CenterAndExpand" 
            VerticalOptions="CenterAndExpand"
            Clicked="FloatingActionButton_Clicked"
            >

        </views:FloatingActionButton>
    </AbsoluteLayout>

</ContentPage>

但是使用这种方法会发生两件事

当设备处于横向模式时，ListView 不会像添加 AbsoluteLayout 之前那样增长

不知道如何定位 FloatingActionButton 以始终保持在任何设备的右下角

我也尝试将 FloatingActionButton 放在当前 StackLayout 中，但它不会浮动，只是添加到列表视图的下方或上方，就像这里显示的常规“行”一样

如果有不清楚的地方，请随意使用 cmets。

【问题讨论】：

标签： android listview xamarin floating-action-button

【解决方案1】：

您可以删除绝对布局，因为您可以看到您的布局在横向模式下没有完全展开。

你可以试试这个

<MainLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
    //YourTopBar
   // YourListView

  <StackLayout HorizontalOptions="End"
               VerticalOptions="End"
               Spacing="0"
               Margin="15">
       <YourFloatingButton />

  </StackLayout>
</MainLayout>

主布局可以是网格或堆栈布局

【讨论】：

感谢您的回答，但这会产生与我的问题的第三张图片非常相似的内容，但按钮位于右侧和底部，但没有浮动

【解决方案2】：

您可以修改布局以使用 Grid 和 AbsoluteLayout 来包装列表视图和浮动按钮。所以它是这样的：（因为我没有你的列表数据源，简单来说，我只是放了一个模拟列表）

<?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:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
             xmlns:local="clr-namespace:App51"
             x:Class="App51.MainPage">

    <StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand">
            <!-- Project Search/Filter toolbar-->
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
                <Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
                <StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
                    <Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Text="++" WidthRequest="27" HeightRequest="27" ></Button>
                </StackLayout>
            </StackLayout>
            <Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
        <Grid>
            <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="8*" />
            </Grid.RowDefinitions>
            <Label Grid.Row="0" Text="FAB" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="24" FontAttributes="Bold" BackgroundColor="LightGray"
               TextColor="CadetBlue" />
            <AbsoluteLayout Grid.Row="1">
                <ListView AbsoluteLayout.LayoutFlags="All"
                      AbsoluteLayout.LayoutBounds="0,1,1,1"
                      VerticalOptions="FillAndExpand"
                      SeparatorColor="Black"
                      RowHeight="50"
                      BackgroundColor="Gray">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <!-- Project Row -->
                                <StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
                                    <Button 
                                Image="Colombia.png" 
                                BackgroundColor="White" 
                                HorizontalOptions="Center"
                                VerticalOptions="Center"
                                WidthRequest="54"
                                HeightRequest="54"
                                >
                                    </Button>
                                    <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                                        <Label 
                                    Text="Binding Name" 
                                    TextColor="Black"
                                    Font="Bold,17"
                                    HorizontalOptions="StartAndExpand"
                                    VerticalOptions="Start" 
                                />
                                        <Label 
                                   Text="Binding Name" 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="Start" 
                                />
                                        <Label 
                                   Text=".." 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="End" 
                                />
                                    </StackLayout>
                                    <Button Text="3"  WidthRequest="44"></Button>
                                    <Button Text=">"  WidthRequest="44" BackgroundColor="White" ></Button>

                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <views:FloatingActionButton  Grid.Row="1" Grid.Column="1"
                    Image="CreateProject.png" 
                    WidthRequest="80" 
                    HeightRequest="80" 
                    HorizontalOptions="End" 
                    VerticalOptions="End"
                    AbsoluteLayout.LayoutFlags="PositionProportional"
                                                AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
                                                Margin="10" >
                </views:FloatingActionButton>
            </AbsoluteLayout>
        </Grid>

    </StackLayout>

</ContentPage>

结果是这样的：

【讨论】：

使用这种方法会使“浮动”按钮显示为 ListView 下方的最后一行，因此不浮动，请参阅我的问题的第三张图片
抱歉我没有注意到“浮动”的消失，我已经修改了答案。

【解决方案3】：

基于@Swift_Talt 的回答和这个讨论-https://forums.xamarin.com/discussion/52420/create-a-layered-page-layering-controls

我使用一 (1) 个单元格的网格找到了这个解决方案，其中 ListView（背景）和 FloatingActionButton 位于同一个唯一单元格上

看起来是这样的：

这是视图/页面

<?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:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
             xmlns:local="clr-namespace:DPM.XForms"
             x:Class="DPM.XForms.ProjectListPage" 
             Title="Drive Plus Mobile"
             >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" Spacing="1">

            <Label Text="TopBar             ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
            <!-- Project Search/Filter toolbar-->
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
                <Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
                <StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
                    <Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
                </StackLayout>
            </StackLayout>
            <Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />



            <ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <!-- Project Row -->
                            <StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
                                <Button 
                                Image="Colombia.png" 
                                BackgroundColor="White" 
                                HorizontalOptions="Center"
                                VerticalOptions="Center"
                                WidthRequest="54"
                                HeightRequest="54"
                                >
                                </Button>
                                <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                                    <Label 
                                    Text="{Binding Name}" 
                                    TextColor="Black"
                                    Font="Bold,17"
                                    HorizontalOptions="StartAndExpand"
                                    VerticalOptions="Start" 
                                />
                                    <Label 
                                   Text="{Binding Brand}" 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="Start" 
                                />
                                    <Label 
                                   Text=".." 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="End" 
                                />
                                </StackLayout>
                                <Button Text="3"  WidthRequest="44"></Button>
                                <Button Text=">"  WidthRequest="44" BackgroundColor="White" ></Button>

                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
        <StackLayout Grid.Row="0" Grid.Column="0"  HorizontalOptions="End" VerticalOptions="End" Spacing="0" Margin="15">
            <views:FloatingActionButton 
            Image="CreateProject.png" 

            WidthRequest="80" 
            HeightRequest="80" 
            HorizontalOptions="CenterAndExpand" 
            VerticalOptions="CenterAndExpand"
            Clicked="FloatingActionButton_Clicked"
            >

            </views:FloatingActionButton>
        </StackLayout>
    </Grid>
</ContentPage>

【讨论】：