如何在XAML的FlexLayout中居中按钮?

pxy2qtax  于 2022-12-31  发布在  其他
关注(0)|答案(1)|浏览(140)

我尝试将这个按钮放在布局下方的中心,布局都被 Package 在FlexLayout中。我在MAUI.NET中使用XAML。

下面是该页面的代码:

<FlexLayout VerticalOptions="Center" HorizontalOptions="Center">
    <StackLayout>
        <CollectionView ItemsSource="{Binding tasks}">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:Task">
                    <VerticalStackLayout Margin="15">
                        <Entry Text="{Binding name}" IsReadOnly="True" />
                        <Entry Text="{Binding departmentsString}" IsReadOnly="True"/>
                        <HorizontalStackLayout>
                            <Entry Text="{Binding status}" IsReadOnly="True"/>
                            <Entry Text="{Binding deadline}" IsReadOnly="True" />
                            <Entry Text="{Binding author.fullName}" IsReadOnly="True"/>
                        </HorizontalStackLayout>
                        <Entry Text="{Binding description}" IsReadOnly="True" />
                    </VerticalStackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
    <VerticalStackLayout Margin="15">
        <Entry Placeholder="Name" x:Name="nameTxt"/>
        <Entry Placeholder="Department" x:Name="departTxt"/>
        <HorizontalStackLayout>
            <Entry Placeholder="status" x:Name="statusTxt"/>
            <Entry Placeholder="deadline" x:Name="deadlineTxt"/>
            <Entry Placeholder="Author" x:Name="authorTxt"/>
        </HorizontalStackLayout>
        <Entry Placeholder="Description" x:Name="descTxt"/>
    </VerticalStackLayout>
    <AbsoluteLayout HorizontalOptions="Center" >
        <ImageButton Aspect="AspectFill" x:Name="addBtn" Source="plus.png" BackgroundColor="Black" Clicked="addBtn_Clicked"/>
    </AbsoluteLayout>
</FlexLayout>

我还尝试过像这样制作 Package 按钮的绝对布局,但没有积极的结果:

<AbsoluteLayout HorizontalOptions="Center" VerticalOptions="End">
        <ImageButton Aspect="AspectFill" x:Name="addBtn" Source="plus.png" BackgroundColor="Black" Clicked="addBtn_Clicked"/>
    </AbsoluteLayout>

我该怎么办?

omqzjyyz

omqzjyyz1#

您可以使用具有两个布局的网格来使按钮居中。

<Grid >
        <FlexLayout VerticalOptions="Center" HorizontalOptions="Center">
            <StackLayout>
                <CollectionView ItemsSource="{Binding tasks}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="models:Task">
                            <VerticalStackLayout Margin="15">
                                <Entry Text="{Binding name}" IsReadOnly="True" />
                                <Entry Text="{Binding departmentsString}" IsReadOnly="True"/>
                                <HorizontalStackLayout>
                                    <Entry Text="{Binding status}" IsReadOnly="True"/>
                                    <Entry Text="{Binding deadline}" IsReadOnly="True" />
                                    <Entry Text="{Binding author.fullName}" IsReadOnly="True"/>
                                </HorizontalStackLayout>
                                <Entry Text="{Binding description}" IsReadOnly="True" />
                            </VerticalStackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
            <VerticalStackLayout Margin="15">
            <Entry Placeholder="Name" x:Name="nameTxt"/>
            <Entry Placeholder="Department" x:Name="departTxt"/>
            <HorizontalStackLayout>
                <Entry Placeholder="status" x:Name="statusTxt"/>
                <Entry Placeholder="deadline" x:Name="deadlineTxt"/>
                <Entry Placeholder="Author" x:Name="authorTxt"/>
            </HorizontalStackLayout>
            <Entry Placeholder="Description" x:Name="descTxt"/>
          </VerticalStackLayout>
      
        </FlexLayout>
        <StackLayout>
            <ImageButton Aspect="AspectFill" x:Name="addBtn" Source="plus.png" BackgroundColor="Black" Clicked="addBtn_Clicked" HorizontalOptions="Center" VerticalOptions="Center"/>
        </StackLayout>
    </Grid>

相关问题