用flutter Visibility自定义显示和隐藏备注信息,每一条对应一个按扭开关
时间: 2024-03-24 11:37:09 浏览: 147
你可以使用Flutter中的StatefulWidget和Visibility Widget来实现这个功能。具体步骤如下:
1. 创建一个StatefulWidget类,用于管理Visibility的状态:
```dart
class NoteVisibilityButton extends StatefulWidget {
@override
_NoteVisibilityButtonState createState() => _NoteVisibilityButtonState();
}
```
2. 在_State类中添加一个bool类型的变量,用于控制Visibility的显示和隐藏:
```dart
class _NoteVisibilityButtonState extends State<NoteVisibilityButton> {
bool _isVisible = false;
@override
Widget build(BuildContext context) {
return Column(
children: [
FlatButton(
onPressed: () {
setState(() {
_isVisible = !_isVisible;
});
},
child: Text('显示/隐藏备注信息'),
),
Visibility(
visible: _isVisible,
child: Text('这是一条备注信息'),
),
],
);
}
}
```
3. 在build方法中添加一个FlatButton,用于控制Visibility的显示和隐藏。当用户点击按扭时,调用setState方法来更新_isVisible的值,并根据该值来显示或隐藏Visibility Widget。
4. 在需要显示备注信息的地方,添加NoteVisibilityButton Widget:
```dart
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Visibility Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('这是一条正常信息'),
SizedBox(height: 20),
NoteVisibilityButton(),
],
),
),
);
}
}
```
这样,每一条信息都对应一个按扭开关,用户可以点击按扭来显示或隐藏相应的备注信息。
阅读全文