目前，此代码用于调整容器大小以在不同内容之间切换，但它不是动画。我认为我需要提供一个 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, 0, 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, 0, 0, 10),
child: Row(
children: [
Icon(
Icons.calendar_today,
color: Colors.black54,
size: 20,
),
Text(
' In three days',
style: TextStyle(
color: Colors.black54,
),
),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 10),
child: Row(
children: [
Icon(
Icons.attach_money,
color: Colors.black54,
),
Text(
' 30',
style: TextStyle(
color: Colors.black54,
),
),
],
),
),
Row(
children: [
Text('Price : '),
Container(
width: 140,
margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.white,
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",
contentPadding: const EdgeInsets.all(10.0)),
keyboardType: TextInputType.multiline,
maxLines: null,
),
),
],
),
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),
),
color: Colors.white,
textColor: Colors.black,
onPressed: () {
/*...*/
},
child: Padding(
padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Text(
"Reply",
),
),
),
],
)
],
),
),
],
),
),
),
),
),
],
),
),
],
)
);
}
}