AnimatedContainer对其高度进行动画处理时会出现渲染错误，因为它在增加高度时包含图标

Question

长按时，容器需要增加其高度并显示图标。但是当增加大小时，如果长按图标值变为true，则会出现渲染错误。如何解决这个问题。

GestureDetector(
      onLongPress: () {
        setState(() {
          widget.heightoo = widget.heightoo == 100 ? 150 : 100;
          widget.booly = widget.booly == true ? false : true;
        });
      },
      child: AnimatedContainer(
        duration: new Duration(milliseconds: 500),
        height: widget.heightoo,
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        child: Card(
          elevation: 4,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                child: Row(
                  children: <Widget>[
                    SizedBox(
                      width: 20,
                    ),
                    Container(
                      height: 50,
                      width: 50,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(14),
                        color: Colors.lightBlueAccent,
                      ),
                      child: ClipRRect(
                          borderRadius: BorderRadius.circular(14),
                          child: Icon(Icons.person)),
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          width: 145,
                          child: Text(
                            widget.tasks1,
                            maxLines: 2,
                            softWrap: true,
                            overflow: TextOverflow.fade,
                            style: TextStyle(
                                fontFamily: 'Poppins',
                                fontWeight: FontWeight.w600,
                                fontSize: 12,
                                color: platformblue),
                          ),
                        ),
                        Container(
                          width: 145,
                          child: Text(
                            widget.tasks3 + ' ' + widget.tasks4,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    Icon(
                        !widget.booly
                            ? widget.task2 ? Icons.live_tv : Icons.location_on
                            : null,
                        size: 40,
                        color: Color(0xFF2143af)),
                  ],
                ),
              ),
              Container(
                  child: widget.booly
                      ? Padding(
                          padding: const EdgeInsets.only(top: 15),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: <Widget>[
                              Icon(
                                Icons.edit,
                                color: Color(0xFF2143af),
                              ),
                              Container(
                                color: Colors.white,
                                height: 30,
                                width: 1,
                                child: VerticalDivider(
                                  color: Colors.black,
                                ),
                              ),
                              GestureDetector(
                                  onTap: () {
                                    print(widget.tasks1);
                                  },
                                  child: Icon(Icons.location_on,
                                      color: Color(0xFF2143af))),
                            ],
                          ),
                        )
                      : null)
            ],
          ),
        ),
      ),
    );

是否还有其他最佳方法可以使容器具有动画效果

我正在添加随机词，因为StackOverflow表示帖子主要是代码。添加更多详细信息ibicscnlsccnlnljsncldnscjcnlsdccklsck csdbicinscj bcnnj ucubdcnuaxn bccuiasnsxuan。

Answer 1

您可以在下面复制粘贴运行完整代码您可以使用onEnd的AnimatedContainer，仅在动画完成后才显示图标

代码段

child: AnimatedContainer(
    onEnd: () {
      showIcon = !showIcon;
      print("end ${showIcon}");
      setState(() {});
    },
...
showIcon? Container(
                  child: widget.booly
                      ? Padding(

工作演示

完整代码

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: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TestWidget(
              heightoo: 100.0,
              booly: false,
              task2: false,
              tasks1: "tasks1",
              tasks3: "tasks3",
              tasks4: "tasks4",
            ),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class TestWidget extends StatefulWidget {
  double heightoo;
  bool booly;
  String tasks1;
  bool task2;
  String tasks3;
  String tasks4;

  TestWidget(
      {this.heightoo,
      this.booly,
      this.tasks1,
      this.task2,
      this.tasks3,
      this.tasks4});
  @override
  _TestWidgetState createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  bool showIcon = false;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onLongPress: () {
        setState(() {
          widget.heightoo = widget.heightoo == 100 ? 150 : 100;
          widget.booly = widget.booly == true ? false : true;
        });
      },
      child: AnimatedContainer(
        onEnd: () {
          showIcon = !showIcon;
          print("end ${showIcon}");
          setState(() {});
        },
        duration: new Duration(milliseconds: 500),
        height: widget.heightoo,
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        child: Card(
          elevation: 4,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                child: Row(
                  children: <Widget>[
                    SizedBox(
                      width: 20,
                    ),
                    Container(
                      height: 50,
                      width: 50,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(14),
                        color: Colors.lightBlueAccent,
                      ),
                      child: ClipRRect(
                          borderRadius: BorderRadius.circular(14),
                          child: Icon(Icons.person)),
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          width: 145,
                          child: Text(
                            widget.tasks1,
                            maxLines: 2,
                            softWrap: true,
                            overflow: TextOverflow.fade,
                            style: TextStyle(
                                fontFamily: 'Poppins',
                                fontWeight: FontWeight.w600,
                                fontSize: 12,
                                color: Colors.blue),
                          ),
                        ),
                        Container(
                          width: 145,
                          child: Text(
                            widget.tasks3 + ' ' + widget.tasks4,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      width: 20,
                    ),
                     Icon(
                            !widget.booly
                                ? widget.task2
                                    ? Icons.live_tv
                                    : Icons.location_on
                                : null,
                            size: 40,
                            color: Color(0xFF2143af))

                  ],
                ),
              ),
              showIcon? Container(
                  child: widget.booly
                      ? Padding(
                          padding: const EdgeInsets.only(top: 15),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: <Widget>[
                              Icon(
                                Icons.edit,
                                color: Color(0xFF2143af),
                              ),
                              Container(
                                color: Colors.white,
                                height: 30,
                                width: 1,
                                child: VerticalDivider(
                                  color: Colors.black,
                                ),
                              ),
                              GestureDetector(
                                  onTap: () {
                                    print(widget.tasks1);
                                  },
                                  child: Icon(Icons.location_on,
                                      color: Color(0xFF2143af))),
                            ],
                          ),
                        )
                      : null) : Container()
            ],
          ),
        ),
      ),
    );
  }
}