【问题标题】:Flutter : Move widget to another positionFlutter:将小部件移动到另一个位置
【发布时间】:2020-02-16 16:14:09
【问题描述】:

按下按钮时,我希望文本(向上移动的文本)到达屏幕顶部并在中心显示新文本。

我认为堆栈和定位小部件可能会起作用。
我想要一个响应式应用。

import 'package:flutter/material.dart';

class MoveTest extends StatefulWidget {
  @override
  _MoveTestState createState() => _MoveTestState();
}

class _MoveTestState extends State<MoveTest> {
  bool moveIt = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Expanded(
            child: Center(
              child: Text(
                'Text to move up',
                style: TextStyle(fontSize: 30),
              ),
            ),
          ),
          (moveIt)
              ? Container(
                  child: Text(
                    'New Text in the center',
                    style: TextStyle(fontSize: 30),
                  ),
                )
              : Container(),
          Container(
            child: RaisedButton(
              onPressed: () {
                setState(() {
                  moveIt = true;
                });
              },
              child: Text('Move'),
            ),
          )
        ],
      ),
    );
  }
}

如何移动带有少量动画的文本并显示带有一些文本的新小部件?
我应该使用带有定位小部件的堆栈吗?
如何使用堆栈/定位小部件和响应式应用程序?

编辑:

您是否通过在不提供任何帮助的情况下投反对票而获得幸福?心狠手辣

【问题讨论】:

    标签: flutter


    【解决方案1】:

    我会使用 SlideTransition (https://api.flutter.dev/flutter/widgets/SlideTransition-class.html),在完成您可以使用提交给 SlideTranslation 的 Animation 对象控制的动画后,您可以在中间显示任何文本。

    启动您的工作的小代码示例。

    import 'dart:async';
    
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Flutter SlideTransition',
          theme: ThemeData.dark(),
          home: MyHomePage()
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
    
      @override
      MyHomePageState createState() => MyHomePageState();
    
    }
    
    
    class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
    
      AnimationController _animationController;
      Animation _animation;
    
      @override
      void initState() {
        _animationController =
            AnimationController(vsync: this, duration: Duration(seconds: 2));
        _animation = Tween<Offset>(begin: Offset(0, 0), end: Offset(0, -0.4)).animate(
            _animationController);
    
        _animationController.forward().whenComplete(() {
          // put here the stuff you wanna do when animation completed!
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return SafeArea(
            child: SlideTransition(
              position: _animation,
              child: Center(child: Text("My Text")),
            )
        );
      }
    }
    

    【讨论】:

    • 我使用了堆栈和定位小部件。但你的看起来很棒。谢谢。
    • @Mahesh 你能分享你的代码,看看你是如何使用堆栈和定位小部件的吗?我也在尝试解决同样的问题。也许在这里添加另一个答案
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-19
    • 1970-01-01
    • 2018-08-23
    相关资源
    最近更新 更多