Размещение элементов пользовательского интерфейса «друг над другом» с помощью FlexLayout в Xamarin.Forms

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?

Да, вы можете поставить editor поверх Frame в твоем случае.Это то же самое, что вы положили Frame внутрь Flexlayout.Я добавил немного backgroundColor к элементам управления, чтобы прояснить ситуацию.

Вот пример помещения editor внутрь Frame:

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

2. Можетесть ли другой, более подходящий макет для моей проблемы?

Есть несколько способов добиться макета для вашей проблемы.Вы можете использовать StackLayout, AbsoluteLayout, RelativeLayout, Grid и так далее.На мой взгляд, какой выбрать в зависимости от себя.У каждого способа есть свои преимущества.Flexlayout удобнее расположить своих дочерних элементов горизонтально и вертикально в стеке.

Вы можете обратиться к официальным документам о layout. Существует несколько демонстраций, похожих на ваш макет, и вы можете получить преимущества каждого варианта макета оттуда.

Макеты