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

Question

我想从全屏宽度来回动画容器。

每当点击 Button 时，我都使用了一种方法来检查 bool 和反转动画。 但容器没有动画。

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

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

谁能建议我怎样才能做到这一点？

我正在考虑在 AnimatedContainer 的 width: 参数中调用一个函数，它将屏幕宽度作为参数，然后返回适当的宽度而不是设置 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),
      ),
    );
  }
}