android 在.Net MAUI中将按钮放置在手机右下角作为固定位置

ee7vknir  于 2023-08-01  发布在  Android
关注(0)|答案(1)|浏览(124)

如何将按钮放置在手机的右下角作为固定位置在.Net MAUI中,以便它位于ScrollView内容上方,就像我们使用CSS在Web应用程序中使用position:"fixed", bottom:"20px", right:"20px"一样。


的数据
我的Xaml看起来像这样:

<VerticalStackLayout VerticalOptions="FillAndExpand">
    <!--Title View-->
    <Grid BackgroundColor="{StaticResource PrimaryColor}" ColumnDefinitions="150, *" HeightRequest="50" 
          VerticalOptions="Center" Padding="5,0,15,0">
        <Label Style="{StaticResource BrandLabelWhite}" Margin="0,0,0,0">Sample App</Label>

        <HorizontalStackLayout Grid.Column="1" HorizontalOptions="EndAndExpand">

            <Image HeightRequest="22" HorizontalOptions="Center" VerticalOptions="Center">
                <Image.Source>
                    <FontImageSource FontFamily="FaIcons"
                                     Glyph="{x:Static fonts:FontAwesomeSolidIcons.EllipsisVertical}"
                                     Size="30" Color="{StaticResource White}"/>
                </Image.Source>
            </Image>
        </HorizontalStackLayout>
    </Grid>

    <ScrollView>
        <Label>Some text</Label>
    </ScrollView>

    <AbsoluteLayout FlexLayout.AlignSelf="End">
        <Button Style="{StaticResource PrimaryButton}"              
            HeightRequest="60" WidthRequest="60"
                AbsoluteLayout.LayoutBounds="1,1,60,60"
                AbsoluteLayout.LayoutFlags="PositionProportional"
            CornerRadius="50">
            <Button.ImageSource>
                <FontImageSource FontFamily="FaIcons"
                                     Glyph="{x:Static fonts:FontAwesomeSolidIcons.Plus}"
                                     Size="20" Color="{StaticResource White}"/>
            </Button.ImageSource>
        </Button>
    </AbsoluteLayout>
</VerticalStackLayout>

字符串
您可以忽略按钮中使用的图标字体。我还尝试使用FlexLayout, Position="Absolute",但位置绝对参考在Microsoft Docs For FlexLayout中不可用

2q5ifsrm

2q5ifsrm1#

试试这个。有几种方法可以做到这一点,这取决于你要做什么与特定的网页。这是网格中的弹性,可能是你想要的。

<Grid Margin="10,0" RowDefinitions="Auto,*">
        <VerticalStackLayout VerticalOptions="Start">
            <!--  Title View  -->
            <Grid
                Grid.Row="0"
                Padding="5,0,15,0"
                BackgroundColor="{StaticResource PrimaryColor}"
                ColumnDefinitions="150, *"
                HeightRequest="50"
                VerticalOptions="Center">
                <HorizontalStackLayout Grid.Column="1" HorizontalOptions="End">
                    <Image
                        HeightRequest="22"
                        HorizontalOptions="Center"
                        VerticalOptions="Center">
                        <Image.Source>
                            <FontImageSource
                                FontFamily="FaIcons"
                                Glyph="{x:Static fonts:FontAwesomeSolidIcons.EllipsisVertical}"
                                Size="30"
                                Color="{StaticResource White}" />
                        </Image.Source>
                    </Image>
                </HorizontalStackLayout>
            </Grid>

            <ScrollView>
                <Label>Some text</Label>
            </ScrollView>
        </VerticalStackLayout>
        <FlexLayout
            Grid.Row="1"
            AlignItems="End"
            JustifyContent="End"
            Wrap="NoWrap">
            <Button
                AbsoluteLayout.LayoutBounds="1,1,60,60"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                CornerRadius="50"
                HeightRequest="60"
                Style="{StaticResource PrimaryButton}"
                WidthRequest="60">
                <Button.ImageSource>
                    <FontImageSource
                        FontFamily="FaIcons"
                        Glyph="{x:Static fonts:FontAwesomeSolidIcons.Plus}"
                        Size="20"
                        Color="{StaticResource White}" />
                </Button.ImageSource>
            </Button>

        </FlexLayout>

    </Grid>

字符串


的数据

相关问题