Question

我在屏幕上有一个RaisedButton小部件和一个AnimatedContainer小部件，其想法是在按下RaisedButton时AnimatedContainer的宽度将减小给定的持续时间。 AnimatedContainer的文档指出，我需要做的就是将小部件的宽度声明为变量，然后在更改值后setState(() {})声明，它将在持续时间内自动更改为该值。。我已经尝试实现此功能，并且在按下RaisedButton时，变量值肯定会更改（基于在按下后打印它的值），但是小部件的宽度不会随之改变。我缺少明显的东西吗？

我的窗口小部件位于PageView的容器中，而我的RaisedButton和AnimatedContainer的代码如下：

RaisedButton (
  onPressed: () {
    setState(() {
      loginWidth = 70.0;
    });
  },
),
AnimatedContainer (
 duration: new Duration (seconds: 2),
 width: loginWidth,
 height: 40,
 color: Colors.red,
)

这是我的小部件树：

pages.add(
      Container(
        color: chSecondary,
        child: Stack(
          children: <Widget>[
            Container (
              child: Align (
                child: Image(image: AssetImage("graphics/signin.png")),
                alignment: Alignment.bottomCenter,
              ),
            ),
            Form(
              key: _formKey,
              child: new Container(
                padding: EdgeInsetsDirectional.only(top: 100, start: 15, end: 15, bottom: 15),
                child: new Column(
                  children: <Widget>[
                    Container (
                      child: Image(image: AssetImage("graphics/login.png"), height: 200, width: 200,),
                      margin: EdgeInsetsDirectional.only(bottom: 20),
                    ),
                    Container (
                      padding: EdgeInsets.all(25.0),
                      decoration: new BoxDecoration(
                        borderRadius: BorderRadius.circular(10.0),
                        color: Colors.white,
                      ),
                      child: Column (
                        children: <Widget>[
                          Align(
                            child: new Text("Email:", style: TextStyle(fontSize: tonSubTitle, color: Colors.black)),
                            alignment: Alignment.centerLeft,
                          ),
                          new Container(
                            child: new TextFormField(
                              keyboardType: TextInputType.emailAddress,
                              controller: _email,
                              style: TextStyle(fontSize: tonText, color: Colors.black),
                              decoration: InputDecoration(
                                border: OutlineInputBorder(borderRadius: new BorderRadius.circular(tonRadius)),
                                contentPadding: EdgeInsetsDirectional.only(top: 15, start: 7.5),
                                focusedBorder: OutlineInputBorder(borderSide: new BorderSide(color: Colors.grey)),
                                hintText: "Email Address",
                                hintStyle: TextStyle(color: Colors.black),
                              ),
                              validator: (value) {
                                if (value.isEmpty) {
                                  return "Please enter an email";
                                }
                                if (!value.contains("@tonbridge-school.org")) {
                                  return "Please enter a valid email address";
                                }
                              },

                            ),
                            padding: const EdgeInsets.only(top: 10, bottom: 10)
                          ),
                          Align (
                            child: new Text("Password:", style: TextStyle(fontSize: tonSubTitle, color: Colors.black)),
                            alignment: Alignment.centerLeft,
                          ),
                          new Container(
                            child: new TextFormField(
                              obscureText: true,
                              controller: _password,
                              style: TextStyle(color: Colors.black, fontSize: tonText),
                              decoration: InputDecoration(
                                contentPadding: EdgeInsetsDirectional.only(top: 15, start: 7.5),
                                border: OutlineInputBorder(borderRadius: new BorderRadius.circular(tonRadius)),
                                focusedBorder: OutlineInputBorder(borderSide: new BorderSide(color: Colors.grey)),
                                hintText: "Password",
                                hintStyle: TextStyle(color: Colors.black),
                              ),
                              validator: (value) {
                                if (value.isEmpty) {
                                  return "Please enter a password";
                                }
                              },
                            ),
                            padding: const EdgeInsets.only(top: 10, bottom: 10)
                          ),
                          RaisedButton (
                            onPressed: () {
                              setState(() {
                                loginWidth = 70.0;
                              });
                            },
                          ),
                          AnimatedContainer (
                            duration: new Duration (seconds: 2),
                            width: loginWidth,
                            height: 40,
                            color: Colors.red,
                          )
                        ],
                      ),
                    )
                  ],
                ),
              )
            ),
          ],
        ),
      ),
    );

Answer 1

您发布的代码段已经正确。确保：

loginWidth已初始化
新的loginWidth值实际上与默认值不同

我已复制它并构建了一个最小的示例，因此您可以再次检查其余代码。此示例还包括周围的 PageView ：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyBody(),
      ),
    );
  }
}

class MyBody extends StatefulWidget {
  @override
  _MyBodyState createState() => _MyBodyState();
}

class _MyBodyState extends State<MyBody> {
  double loginWidth = 40.0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: PageView(
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              RaisedButton (
                child: Text('Animate!'),
                onPressed: () {
                  setState(() {
                    loginWidth = 250.0;
                  });
                },
              ),
              AnimatedContainer (
                duration: Duration (seconds: 1),
                width: loginWidth,
                height: 40,
                color: Colors.red,
              ),
            ],
          )
        ],
      ),
    );
  }
}

Answer 2

您在哪里声明了loginWidth？它需要超出构建器函数的范围，否则它将在每次构建时重新初始化其值。

您可以更新示例以显示声明的地方吗？

正确：

class _WidgetState extends State<Widget> {
  double loginWidth = 0;

  @override
  Widget build(BuildContext context) {
    // return the new widget tree
  }
}

不正确：

class _WidgetState extends State<Widget> {

  @override
  Widget build(BuildContext context) {
    double loginWidth = 0;

    //return the new widget tree
  }
}

Answer 3

您初始化了loginWidth吗？

var loginWidth =0.0;
Curve _curve = Curves.fastOutSlowIn;
_doanimation(){

setState(() {
    loginWidth ==0.0? loginWidth =100: loginWidth =0.0;
   });
}

根据情况更改功能

    Column(
            children: <Widget>[
              Text("welcome"),
              RaisedButton(
                onPressed: (){
                  _doanimation();
                },
              ),
              AnimatedContainer(
                curve: _curve,
                duration: Duration(seconds: 1),
                width: loginWidth,
                height:100

              )
            ],
          ),

Flutter动画容器

3 个答案: