Question

我尝试了很多类似Animated Size And Fade的软件包和类似AnimatedSwitcher的小部件，但实际上没有任何作用，他们只是在没有动画的情况下更改了小部件..这是我的代码：

                AnimatedSwitcher(
                    duration: Duration(milliseconds: 1),
                    child: isCompany
                        ? Container(
                      key: ValueKey<int>(0),
                      child: Padding(
                      padding: const EdgeInsets.fromLTRB(40, 0, 40, 0),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  TextField(
                                    decoration: InputDecoration(
                                        enabledBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.white),
                                        ),
                                        prefixIcon: Image.asset(
                                            'assets/images/user_icon.png'),
                                        labelText: 'إسم المستخدم',
                                        labelStyle: TextStyle(
                                            color: Colors.white, fontSize: 18)),
                                  ),
                                  TextField(
                                    decoration: InputDecoration(
                                        enabledBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.white),
                                        ),
                                        prefixIcon: Image.asset(
                                            'assets/images/password_icon.png'),
                                        suffixIcon: IconButton(
                                          icon: Image.asset(
                                              'assets/images/show_icon.png'),
                                          onPressed: () {},
                                        ),
                                        labelText: 'كلمة المرور',
                                        labelStyle: TextStyle(
                                            color: Colors.white, fontSize: 18)),
                                  ),
                                ],
                              ),
                            ),
                        )
                        : Container(
                      key: ValueKey<int>(1),
                      child: Padding(
                      padding: const EdgeInsets.fromLTRB(40, 40, 40, 40),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  TextField(
                                    decoration: InputDecoration(
                                        enabledBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.white),
                                        ),
                                        prefixIcon: Image.asset(
                                            'assets/images/user_icon.png'),
                                        labelText: 'رقم الجوال',
                                        labelStyle: TextStyle(
                                            color: Colors.white, fontSize: 18)),
                                  ),
                                  TextField(
                                    decoration: InputDecoration(
                                        enabledBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.white),
                                        ),
                                        prefixIcon: Image.asset(
                                            'assets/images/password_icon.png'),
                                        suffixIcon: IconButton(
                                          icon: Image.asset(
                                              'assets/images/show_icon.png'),
                                          onPressed: () {},
                                        ),
                                        labelText: 'كلمة المرور',
                                        labelStyle: TextStyle(
                                            color: Colors.white, fontSize: 18)),
                                  ),
                                ],
                              ),
                            ),
                        )
                ),

这只是一个单击即可更改的小部件，根本没有动画，我需要使其像此视频一样：

https://youtu.be/Uwe8hHkfd8I

Answer 1

AnimatedSwitcher只是在显示的小部件之间切换。

我想到您的问题的一个主意是使用一个堆栈，其中包含两个“定位项”作为按钮和一个“ PositionedTransition”，该堆栈在按下时在第一个和第二个“定位小部件”的位置之间进行转换。

看看这个例子：https://api.flutter.dev/flutter/widgets/PositionedTransition-class.html

现在我有时间来快速简单地说明一下我的想法，如下所示：

（不会滞后-这是视频到gif的转换引起的）

可以复制粘贴为基础的代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  final double containerWidth = 150.0;
  final double containerHeight = 50.0;
  final double padding = 20.0;
  final double borderWidth = 5.0;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: Duration(seconds: 1), vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: LayoutBuilder(builder: (context, constraints) {
        final Size biggest = constraints.biggest;
        return Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          color: Colors.white,
          child: Stack(
            children: [
              PositionedTransition(
                rect: RelativeRectTween(
                  begin: RelativeRect.fromSize(
                      Rect.fromLTWH(
                          padding, padding, containerWidth, containerHeight),
                      biggest),
                  end: RelativeRect.fromSize(
                      Rect.fromLTWH(biggest.width - containerWidth - padding,
                          padding, containerWidth, containerHeight),
                      biggest),
                ).animate(CurvedAnimation(
                  parent: _controller,
                  curve: Curves.easeInOut,
                )),
                child: Container(
                  width: containerWidth,
                  height: containerHeight,
                  decoration:
                      BoxDecoration(border: Border.all(width: borderWidth)),
                ),
              ),
              Positioned(
                  top: padding + borderWidth,
                  left: padding + borderWidth,
                  child: GestureDetector(
                    onTap: () {
                      _controller.reverse();
                    },
                    child: Container(
                      width: containerWidth - 2 * borderWidth,
                      height: containerHeight - 2 * borderWidth,
                      child: Center(
                        child: Text(
                          "Text1",
                          style: TextStyle(color: Colors.black, fontSize: 20),
                        ),
                      ),
                    ),
                  )),
              Positioned(
                  top: padding + borderWidth,
                  left: biggest.width - containerWidth - padding + borderWidth,
                  child: GestureDetector(
                    onTap: () {
                      _controller.forward();
                    },
                    child: Container(
                      width: containerWidth - 2 * borderWidth,
                      height: containerHeight - 2 * borderWidth,
                      child: Center(
                        child: Text(
                          "Text2",
                          style: TextStyle(color: Colors.black, fontSize: 20),
                        ),
                      ),
                    ),
                  )),
            ],
          ),
        );
      }),
    );
  }
}

未来工作：要实现视频中想要的功能，可以使用AnimatedSwitcher，您已经尝试过根据按钮的按下在两个Input字段之间进行切换。

在flutter中为小部件设置动画的正确方法是什么

1 个答案: