有10条备注信息,每条对应一个按扭开关,自定义隐藏和显示,flutter怎么写
时间: 2024-03-24 21:36:58 浏览: 16
在Flutter中实现这个功能可以通过使用StatefulWidget和State来实现。
首先,我们需要定义一个StatefulWidget,它包含10个按扭开关和对应的备注信息:
```dart
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
Map<String, bool> _switchStatus = {
'switch1': false,
'switch2': false,
'switch3': false,
'switch4': false,
'switch5': false,
'switch6': false,
'switch7': false,
'switch8': false,
'switch9': false,
'switch10': false,
};
Map<String, String> _remarks = {
'switch1': 'Remark 1',
'switch2': 'Remark 2',
'switch3': 'Remark 3',
'switch4': 'Remark 4',
'switch5': 'Remark 5',
'switch6': 'Remark 6',
'switch7': 'Remark 7',
'switch8': 'Remark 8',
'switch9': 'Remark 9',
'switch10': 'Remark 10',
};
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Widget'),
),
body: ListView.builder(
itemCount: _switchStatus.length,
itemBuilder: (context, index) {
String switchKey = _switchStatus.keys.elementAt(index);
return ListTile(
title: Text(_remarks[switchKey]),
trailing: Switch(
value: _switchStatus[switchKey],
onChanged: (value) {
setState(() {
_switchStatus[switchKey] = value;
});
},
),
);
},
),
);
}
}
```
在这个StatefulWidget中,我们使用了两个Map分别存储按扭开关的状态和备注信息。在build方法中,我们使用ListView.builder构建了一个列表,列表中每个元素对应一个按扭开关和对应的备注信息,我们使用Switch来显示按扭开关,使用Text来显示备注信息。当按扭开关的状态发生变化时,我们使用setState方法更新状态。
最后,我们在main函数中使用MyWidget来显示这个Widget:
```dart
void main() {
runApp(MaterialApp(
home: MyWidget(),
));
}
```
这样,就实现了一个包含10个按扭开关和对应的备注信息的Widget,用户可以自定义隐藏和显示。