相关疑难解决方法(0)

如何为可扩展的 Flutter 小部件制作动画以将其滑出屏幕

我有两个可扩展的按钮排成一行,占据了所有屏幕宽度。在左键单击时,我希望左键占据整个屏幕宽度,而右键则通过右侧显示消失在屏幕之外。这是我迄今为止取得的成就:

在此处输入图片说明

正如你所注意到的,当没有足够的空间来渲染它时,右边的按钮会在最后被压扁。我只是想让它继续移出屏幕而不改变它的宽度。我可以通过为按钮设置一行文本来实现这一点,但我希望该解决方案通常适用于所有小部件(看起来右边有足够的空间来渲染它)。

当前解决方案:

import 'package:flutter/material.dart';

void main() => runApp(TestAnimation());

class TestAnimation extends StatefulWidget {
  @override
  _TestAnimationState createState() => _TestAnimationState();
}

class _TestAnimationState extends State<TestAnimation> with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(duration: Duration(seconds: 2), vsync: this);
    _animation = IntTween(begin: 100, end: 0).animate(_animationController);
    _animation.addListener(() => setState(() {}));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: <Widget>[
              Expanded(
                flex: 100,
                child: OutlineButton(
                  child: Text("Left"),
                  onPressed: () {
                    if …
Run Code Online (Sandbox Code Playgroud)

animation widget dart flutter

3
推荐指数
1
解决办法
6493
查看次数

标签 统计

animation ×1

dart ×1

flutter ×1

widget ×1