flutter - 代码是正确的，但容器没有移动

Question

Link编码。

    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('Moving Box')),
            body: Stack(
                children: <Widget>[
            Align(
              alignment: FractionalOffset(1, 0),
              child: Container(
                // Use the properties stored in the State class.
                width: _width,
                height: _height,
                color: Color(0xffe5ee22),
              ),
            ),
          ],
        )
//      body: _buildBody(context)
        );
  }

Answer 1

根据您的要点，您计划使用 AnimatedContainer

因此，我尝试以尽可能少的修改为您修复代码

1. 必须将 AnimatedContainerApp 包装到 MaterialApp 小部件中

更改此代码:

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

class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

进入这个:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: AnimatedContainerApp(),
    );
  }
}

class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

1. 将容器更改为动画容器

改变这部分:

child: Container(
  // Use the properties stored in the State class.
  width: _width,
  height: _height,
  color: Color(0xffe5ee22),
),

进入这个:

child: AnimatedContainer( // Changed to AnimatedContainer
  duration: Duration(seconds: 1), // Duration is mandatory
  width: _width,
  height: _height,
  color: Color(0xffe5ee22),
),

1. 调用setState()创建触发动画的按钮

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  bool isSmall = true;
  double _width = 50;
  double _height = 50;

  void changeSize() {
    // Business Logic
    if (isSmall) {
      setState(() {
        _width = 100;
        _height = 100;
        isSmall = false;
      });
    } else {
      setState(() {
        _width = 50;
        _height = 50;
        isSmall = true;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Moving Box'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add_to_home_screen),
            onPressed: changeSize, // this will toggle size of container
          )
        ],
      ),

演示

完整代码:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: AnimatedContainerApp(),
    );
  }
}

class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  bool isSmall = true;
  double _width = 50;
  double _height = 50;

  void changeSize() {
    // Toggle State
    if (isSmall) {
      setState(() {
        _width = 100;
        _height = 100;
        isSmall = false;
      });
    } else {
      setState(() {
        _width = 50;
        _height = 50;
        isSmall = true;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Moving Box'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add_to_home_screen),
            onPressed: changeSize,
          )
        ],
      ),
      body: Stack(
        children: <Widget>[
          Align(
            alignment: FractionalOffset(1, 0),
            child: AnimatedContainer( // Changed to AnimatedContainer
              duration: Duration(seconds: 1), // Add Duration
              width: _width,
              height: _height,
              color: Color(0xffe5ee22),
            ),
          ),
        ],
      ),
    );
  }
}