Question

在这里，我提供了一个粗略的布局方案及其外观：

我想添加以下功能：首先，我希望密码标签和条目不可见，并且submit按钮位于其位置。当用户输入有效的用户名时，提交按钮应向下滑动并显示密码标签/条目（如果用户名再次无效，则反转此动画）。我想通过的是，我应该在密码标签/条目上放一个白框，将其不透明度从0更改为1，然后按密码标签/条目高度滑动submit按钮。请注意，提交按钮应该在密码标签/条目上，因为在滑动时，密码标签/条目可能会覆盖提交按钮。

我的问题是：（1）是否可以使用StackLayout，使用我现在使用的方案，如果没有，（2）我该怎么做？提前谢谢。

Answer 1

是的，这是可能的。

首先，为了使按钮在页面上移动，你应该有一个绝对布局。所以将所有内容都包装在AbsoluteLayout

中

我会为密码输入设置初始Scale="0"。所以当用户获得有效时

这是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"
             x:Class="ThesisSFA.Pages.Page1">
  <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    <StackLayout Orientation="Horizontal" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
      <Label Text="User:"></Label>
      <Editor x:Name="EditorUser" Text="" WidthRequest="100"></Editor>
    </StackLayout>
    <StackLayout x:Name="StackPass" Orientation="Horizontal" Scale="0" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5,0.6,-1,-1">
      <Label  Text="Pass:"></Label>
      <Editor Text="" WidthRequest="100"></Editor>
    </StackLayout>
    <Button x:Name="ButtonSubmit" Text="Submit" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5,0.6,-1,-1"></Button>
  </AbsoluteLayout>
</ContentPage>

代码背后

public partial class Page1 : ContentPage
    {
        public Page1()
        {
            InitializeComponent();

            EditorUser.Completed += async (sender, args) =>
            {                    
                var rect = new Rectangle(ButtonSubmit.X, ButtonSubmit.Y + 50, ButtonSubmit.Width, ButtonSubmit.Height);
                await ButtonSubmit.LayoutTo(rect, 400, Easing.CubicIn);
                await StackPass.ScaleTo(1, 400, Easing.SinIn);
            };
        }
    }

这可以让您了解如何继续

是否可以在StackLayout中为元素设置动画？

1 个答案: