以下代码显示的时候,加个渐变动画效果 class MyWidget extends StatefulWidget { @override _MyWidgetState createState() => _MyWidgetState(); } class _MyWidgetState extends State<MyWidget> { List<Map<String, dynamic>> _data = [ {'title': '备注1', 'content': '这是备注1的内容', 'isVisible': 0}, {'title': '备注2', 'content': '这是备注2的内容', 'isVisible': 0}, {'title': '备注3', 'content': '这是备注3的内容', 'isVisible': 0}, ]; @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.symmetric(vertical: 30, horizontal: 10), child: Column( children: _data.map((item) { int index = _data.indexOf(item); return Column( children: [ ListTile( title: Text(item['title']), trailing: IconButton( icon: Icon(item['isVisible'] == 1 ? Icons.arrow_drop_up : Icons.arrow_drop_down), onPressed: () { setState(() { _data[index]['isVisible'] = _data[index]['isVisible'] == 1 ? 0 : 1; }); }, ), ), Visibility( visible: item['isVisible'] == 1, child: Text(item['content']), ), ], ); }).toList(), ), ); } }
时间: 2024-02-10 16:16:57 浏览: 31
好的,为了给这个组件添加渐变动画效果,我们可以使用AnimatedOpacity组件来实现。AnimatedOpacity组件可以使其子组件的透明度在一定时间内进行动画过渡,从而产生渐变效果。
下面是修改后的代码:
```dart
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
List<Map<String, dynamic>> _data = [
{'title': '备注1', 'content': '这是备注1的内容', 'isVisible': 0},
{'title': '备注2', 'content': '这是备注2的内容', 'isVisible': 0},
{'title': '备注3', 'content': '这是备注3的内容', 'isVisible': 0},
];
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(vertical: 30, horizontal: 10),
child: Column(
children: _data.map((item) {
int index = _data.indexOf(item);
return Column(
children: [
ListTile(
title: Text(item['title']),
trailing: IconButton(
icon: Icon(item['isVisible'] == 1
? Icons.arrow_drop_up
: Icons.arrow_drop_down),
onPressed: () {
setState(() {
_data[index]['isVisible'] =
_data[index]['isVisible'] == 1 ? 0 : 1;
});
},
),
),
AnimatedOpacity(
opacity: item['isVisible'] == 1 ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
child: Text(item['content']),
),
],
);
}).toList(),
),
);
}
}
```
在这个例子中,我们把原来的Visibility组件替换成了AnimatedOpacity组件。在AnimatedOpacity组件中,我们设置了子组件的透明度opacity属性,根据item['isVisible']的值来进行判断是否显示,当isVisible为1时,透明度为1.0,即完全不透明,否则透明度为0.0,即完全透明。另外,我们还设置了动画过渡的时间为500毫秒,即0.5秒。这样,当用户点击箭头按钮时,对应的内容会平滑地从隐藏状态渐变到显示状态,产生一个简单的渐变动画效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)