'AnimatedContainer' 宽度从设备屏幕全宽到 Flutter 中特定值的来回动画

Question

我想使动画容器在全屏宽度之间来回移动。

我使用了一种方法来检查 bool 并在点击 Button 时反转动画。 但是容器没有动画。

我发现，由于我的变量 animatedContainerWidth 用于设置 AnimatedContainer 宽度是在小部件的 build 方法中设置的，因为我想使用 MediaQuery.of(context).size.width ,

所以每当 setState 在点击的按钮上调用时。 Build 函数传递了 MediaQuery.of(context).size.width，因此我没有让 Container 进行动画处理。

任何人都可以建议我如何实现这一目标吗？

我正在考虑在 AnimatedContainer 的 width: 参数中调用一个函数，它将屏幕宽度作为参数，然后 return 适当的宽度而不是设置 animatedContainerWidth 在那个方法里面。但这将是一个复杂的方法。

如果有人能提出更简单的方法，我们将不胜感激。谢谢！

我的代码如下：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  bool isOpen = false;
  double screenWidth;

  double animatedSearchContainerWidth = 342;

  void containerAnimation(double _screenWidth) {
    isOpen = !isOpen;
    isOpen
        ? animatedSearchContainerWidth = 50.0
        : animatedSearchContainerWidth = _screenWidth;

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    screenWidth = MediaQuery.of(context).size.width;
    animatedSearchContainerWidth = screenWidth;

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimatedContainer(
          duration: Duration(milliseconds: 300),
          width: animatedSearchContainerWidth,
          height: 50.0,
          curve: Curves.easeOut,
          color: Colors.redAccent,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => containerAnimation(screenWidth),
        tooltip: 'Animate',
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

Answer 1

您将行 animatedSearchContainerWidth = screenWidth; 放在构建方法中，因此它在每个构建中都是运行。

import 'dart:math';

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,
      ),
      home: MyHomePage(
        title: 'title',
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  bool isOpen = false;

  @override
  Widget build(BuildContext context) {
    var screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimatedContainer(
          duration: Duration(milliseconds: 300),
          width: isOpen ? 50.0 : screenWidth,
          height: 50.0,
          curve: Curves.easeOut,
          color: Colors.redAccent,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          isOpen = !isOpen;
        }),
        tooltip: 'Animate',
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

'AnimatedContainer' 宽度从设备屏幕全宽到 Flutter 中特定值的来回动画

Back and forth animation of 'AnimatedContainer' width from full width of device screen to a specific value in Flutter

flutter

flutter-layout

flutter-animation