flutter 一个页面内有多个按钮,封装一个方法,实现点击一个按钮,该按钮颜色改变,其他按钮颜色保持不变 ,同时点击不同按钮,传入不同的数据,以达到在同一页面通过按钮控制展示不同的数据
时间: 2024-05-14 20:14:23 浏览: 20
可以通过使用StatefulWidget和State来实现该功能。具体步骤如下:
1. 创建一个StatefulWidget,在其State中创建一个变量用于保存当前选中的按钮的索引。
```
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
int _selectedIndex = 0;
// ...
}
```
2. 在StatefulWidget中创建一个方法用于返回一个按钮列表,每个按钮都有一个点击事件,点击时将当前选中的按钮索引更新为该按钮的索引。
```
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
int _selectedIndex = 0;
List<Widget> _buildButtons() {
return [
_buildButton(0, "Button 1"),
_buildButton(1, "Button 2"),
_buildButton(2, "Button 3"),
];
}
Widget _buildButton(int index, String text) {
return FlatButton(
color: _selectedIndex == index ? Colors.blue : Colors.grey,
onPressed: () {
setState(() {
_selectedIndex = index;
});
},
child: Text(text),
);
}
// ...
}
```
3. 在StatefulWidget中创建一个方法用于根据当前选中的按钮索引返回对应的数据。
```
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
int _selectedIndex = 0;
List<String> _dataList = [
"Data 1",
"Data 2",
"Data 3",
];
List<Widget> _buildButtons() {
return [
_buildButton(0, "Button 1"),
_buildButton(1, "Button 2"),
_buildButton(2, "Button 3"),
];
}
Widget _buildButton(int index, String text) {
return FlatButton(
color: _selectedIndex == index ? Colors.blue : Colors.grey,
onPressed: () {
setState(() {
_selectedIndex = index;
});
},
child: Text(text),
);
}
String _getCurrentData() {
return _dataList[_selectedIndex];
}
// ...
}
```
4. 在StatefulWidget中使用_buildButtons方法创建一个按钮列表,使用_getCurrentData方法获取当前选中的数据并展示。
```
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
int _selectedIndex = 0;
List<String> _dataList = [
"Data 1",
"Data 2",
"Data 3",
];
List<Widget> _buildButtons() {
return [
_buildButton(0, "Button 1"),
_buildButton(1, "Button 2"),
_buildButton(2, "Button 3"),
];
}
Widget _buildButton(int index, String text) {
return FlatButton(
color: _selectedIndex == index ? Colors.blue : Colors.grey,
onPressed: () {
setState(() {
_selectedIndex = index;
});
},
child: Text(text),
);
}
String _getCurrentData() {
return _dataList[_selectedIndex];
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Row(
children: _buildButtons(),
),
Text(_getCurrentData()),
],
);
}
}
```
这样,就可以在同一个页面中通过按钮控制展示不同的数据了。