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

Question

我正在尝试让 SuaveControls.FloatingActionButton 按照此页面上的示例在 ListView 之上工作 - https://devlinduldulao.pro/how-to-create-a-floating-action-button/

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

这是View/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 中，但它不会浮动，只是作为常规 "row" 添加到列表视图的下方或上方，如下所示

如果有不清楚的地方，请随时使用评论。

Answer 1

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

你可以试试这个

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

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

  </StackLayout>
</MainLayout>

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

Answer 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>

结果是这样的：

Answer 3

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

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

这是它的样子：

这是 View/Page

<?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>

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

How to make a FloatingActionButton work on top of a ListView and position it correctly

android

listview

xamarin

floating-action-button