使用Xamarin.Forms中的FlexLayout将UI元素“放在彼此之上”

Question

我的目标：

1. 将Editor放在Frame内，无论提供多少文本，编辑器都不会扩展到框架之外。
2. 在ActivityIndicator的内部放置Button（并在Button时使IsBusy文本不可见）。
3. 使它与不同大小的设备相关。

我的问题

1. 是否可以使用FlexLayout使这些控件彼此“重叠”出现？
2. 能否为我的问题提供另一种更合适的布局？

---

当前设置：

---

我希望它看起来像什么：

---

当前的XAML

<!--  This is where the main content on the slide up menu starts  -->
        <Frame
            Grid.Row="1"
            BorderColor="white"
            CornerRadius="0"
            HasShadow="True"
            OutlineColor="White">

            <FlexLayout
                AlignItems="Center"
                Direction="Column"
                JustifyContent="SpaceEvenly">

                <!--  Title  -->
                <Label
                    Grid.Row="0"
                    FontAttributes="Bold"
                    FontSize="Medium"
                    HorizontalOptions="Center"
                    HorizontalTextAlignment="Center"
                    Text="{util:Translate Viewtitle}" />

                <!--  Scrollable text  -->
                <ScrollView
                    x:Name="ActionViewScroller"
                    Grid.Row="1"
                    Margin="10"
                    HorizontalOptions="Fill"
                    VerticalOptions="Center"
                    VerticalScrollBarVisibility="Always">
                    <Label Text="{Binding ActionText}" />
                </ScrollView>

                <!--  Text box for optional notes  -->
                <Frame
                    Grid.Row="2"
                    Margin="10"
                    BackgroundColor="White"
                    BorderColor="LightGray"
                    CornerRadius="0"
                    FlexLayout.Gorw="1"
                    HasShadow="False"
                    WidthRequest="280" />
                <Editor
                    x:Name="ActionViewNotes"
                    Grid.Row="2"
                    Margin="15"
                    AutoSize="TextChanges"
                    FlexLayout.Grow="1"
                    HorizontalOptions="FillAndExpand"
                    IsSpellCheckEnabled="True"
                    Keyboard="Default"
                    MaxLength="150"
                    Placeholder="{util:Translate PlaceholderText}"
                    Text="{Binding ConsentNotes, Mode=OneWayToSource}"
                    VerticalOptions="Center"
                    WidthRequest="280" />


                <!--  Submit Button  -->
                <Button
                    Grid.Row="3"
                    AlignSelf="Stretch"                      
                    Command="{Binding DoSomething}"
                    CommandParameter="{Binding Source={Reference TheNotes}, Path=Text}"
                    HeightRequest="70"
                    HorizontalOptions="FillAndExpand"
                    IsVisible="{Binding IsBusy, Converter={StaticResource NegateBooleanConverter}}"
                    Style="{StaticResource TertiaryButtonStyle}"
                    Text="{util:Translate DoSomethingText}"
                    WidthRequest="350" />
                <ActivityIndicator
                    Grid.Row="3"
                    Margin="5"
                    HorizontalOptions="Center"
                    IsRunning="{Binding IsBusy}"
                    IsVisible="{Binding IsBusy}"
                    Style="{DynamicResource BaseActivityIndicatorStyle}" />

            </FlexLayout>
        </Frame>

---

Answer 1

  

1。是否有一种方法可以使这些控件使用FlexLayout彼此“重叠”显示？

是的，您可以将for放在editor的上方。就像将Frame放在Frame内一样。我在控件中添加了Flexlayout，以使其更加清晰。

以下是将backgroundColor放在editor内的示例：

Frame

  

2。是否可以为我的问题提供另一种更合适的布局？

有几种方法可以解决您的问题。您可以使用 <StackLayout> <!-- Place new controls here --> <Frame Grid.Row="1" BorderColor="white" CornerRadius="0" HasShadow="True" OutlineColor="White"> <FlexLayout AlignItems="Center" Direction="Column" JustifyContent="SpaceEvenly"> <!-- Title --> <Label Grid.Row="0" FontAttributes="Bold" FontSize="Medium" HorizontalOptions="Center" HorizontalTextAlignment="Center" BackgroundColor="Green" Text=" Viewtitle" /> <!-- Scrollable text --> <ScrollView x:Name="ActionViewScroller" Grid.Row="1" Margin="10" HorizontalOptions="Fill" VerticalOptions="Center" VerticalScrollBarVisibility="Always"> <Label Text="123" /> </ScrollView> <!-- Text box for optional notes --> <Frame Grid.Row="2" Margin="10" BorderColor="LightGray" CornerRadius="0" FlexLayout.Grow="1" HasShadow="False" WidthRequest="280" BackgroundColor="Red"> <!-- Put your Editor inside Frame here --> <Editor x:Name="ActionViewNotes" Grid.Row="2" Margin="15" AutoSize="TextChanges" FlexLayout.Grow="1" HorizontalOptions="FillAndExpand" IsSpellCheckEnabled="True" Keyboard="Default" MaxLength="150" Placeholder="PlaceholderText" VerticalOptions="Center" WidthRequest="280" BackgroundColor="AliceBlue"/> </Frame> </FlexLayout> </Frame> </StackLayout> ，StackLayout，AbsoluteLayout，RelativeLayout等。我认为，要根据自己的选择。每种方式都有其自身的优势。 Grid更方便地将其子级水平和垂直排列在堆栈中。

您可以参考有关Flexlayout的官方文档。有几个与您的布局相似的演示，您可以从中获得每个布局选项的优势。

Layouts