如何将Flutter AnimatedContainer与高度匹配的子项一起使用

问题描述

当前，此代码可以调整容器的大小，以在不同的内容之间切换，但这不是动画。我认为我需要提供一个height属性来使动画工作，并且当我确实提供一个可以在其之间切换的高度时，就像这样：

height: selected ? 400 : 100,

容器在两个状态之间平滑地动画。但是，高度不再自适应。所以我尝试使用以下方法提供高度：

GlobalKey _key = GlobalKey();

_size = _key.currentContext.size;

height: _size.height,

但是它给了我错误，我不确定如何解决。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',theme: ThemeData(
        primarySwatch: Colors.blue,),home: MyHomePage(),);
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  bool selected = false;
//  GlobalKey _key = GlobalKey();
//  Size _size = _key.currentContext.size;




  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                GestureDetector(
                  onTap: () {
                    setState(() {
                      selected = !selected;
//                      _size = _key.currentContext.size;
                    });
                  },child: Padding(
                    padding: EdgeInsets.all(5),child: AnimatedContainer(
//                      height: _size.height,//                      key: _key,duration: Duration(seconds: 1),curve: Curves.fastOutSlowIn,decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15),color: Colors.white,boxShadow: [
                          BoxShadow(
                            blurRadius: 2.5,spreadRadius: 0.4,color: Colors.grey,offset: Offset(0,0.5),],child: Padding(
                        padding: EdgeInsets.all(17),child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,children: [
                            Text(
                              'Move fridge up stairs',style: TextStyle(fontSize: 16),SizedBox(height: 5),Text(
                              'Sarah - 2 days ago - 2.3km',style: TextStyle(color: Colors.black54),if (selected)
                              Container(
                                child: Column(
                                  children: [
                                    Padding(
                                      padding: EdgeInsets.fromLTRB(0,20,20),child: Text(
                                        'Fridge is a single door. Sitting in kitchen. Need one strong person as I will help move it.',style: TextStyle(
                                          color: Colors.black54,Padding(
                                      padding: EdgeInsets.fromLTRB(0,10),child: Row(
                                        children: [
                                          Icon(
                                            Icons.calendar_today,color: Colors.black54,size: 20,Text(
                                            ' In three days',style: TextStyle(
                                              color: Colors.black54,child: Row(
                                        children: [
                                          Icon(
                                            Icons.attach_money,Text(
                                            ' 30',Row(
                                      children: [
                                        Text('Price : '),Container(
                                          width: 140,margin: EdgeInsets.fromLTRB(0,0),decoration: BoxDecoration(
                                            borderRadius: BorderRadius.circular(20.0),border: Border.all(color: Colors.white),child: Container(
                                            child: TextField(
                                              decoration: new InputDecoration(
                                                  hintText: "Your price",contentPadding: const EdgeInsets.all(10.0)),keyboardType: TextInputType.number,maxLines: null,Row(
                                      children: [
                                        Text('Reply : '),Expanded(
                                          child: TextField(
                                            decoration: new InputDecoration(
                                                hintText: "Enter your reply",keyboardType: TextInputType.multiline,SizedBox(height:20),Row(
                                      mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
                                        SizedBox(
                                          width: 10,FlatButton(
                                          shape: RoundedRectangleBorder(
                                            side: BorderSide(
                                                color: Colors.blue,width: 1,style: BorderStyle.solid),borderRadius: BorderRadius.circular(50),textColor: Colors.black,onPressed: () {
                                            /*...*/
                                          },child: Padding(
                                            padding: EdgeInsets.fromLTRB(0,10,child: Text(
                                              "Reply",)
                                  ],)

    );
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）