用flutter Visibility自定义显示和隐藏备注信息,点击按扭时只对应指定的显示层和隐藏,一对一的控制,不同时展开全部备注,只显示其中一条
时间: 2024-03-24 20:37:28 浏览: 119
您可以通过将每个备注信息包装在一个单独的Visibility小部件中,并将其与一个布尔变量绑定在一起来实现这个功能。这个布尔变量将控制每个备注信息的可见性。
以下是一个示例代码:
```dart
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
bool _isVisible1 = false;
bool _isVisible2 = false;
bool _isVisible3 = false;
@override
Widget build(BuildContext context) {
return Column(
children: [
ListTile(
title: Text('备注1'),
trailing: IconButton(
icon: Icon(_isVisible1 ? Icons.arrow_drop_up : Icons.arrow_drop_down),
onPressed: () {
setState(() {
_isVisible1 = !_isVisible1;
});
},
),
),
Visibility(
visible: _isVisible1,
child: Text('这是备注1的内容'),
),
ListTile(
title: Text('备注2'),
trailing: IconButton(
icon: Icon(_isVisible2 ? Icons.arrow_drop_up : Icons.arrow_drop_down),
onPressed: () {
setState(() {
_isVisible2 = !_isVisible2;
});
},
),
),
Visibility(
visible: _isVisible2,
child: Text('这是备注2的内容'),
),
ListTile(
title: Text('备注3'),
trailing: IconButton(
icon: Icon(_isVisible3 ? Icons.arrow_drop_up : Icons.arrow_drop_down),
onPressed: () {
setState(() {
_isVisible3 = !_isVisible3;
});
},
),
),
Visibility(
visible: _isVisible3,
child: Text('这是备注3的内容'),
),
],
);
}
}
```
在这个示例中,我们将每个备注信息包装在一个Visibility小部件中,并将其与一个布尔变量绑定在一起。当用户点击一个备注信息的展开/收缩图标时,我们会通过setState方法更新对应的布尔变量,从而控制该备注信息的可见性。通过这种方式,我们可以实现一对一的控制,而不是展开/收缩所有备注信息。
阅读全文