flutter - 按钮栏小部件在按下时更改按钮的颜色
问题描述
我写了一个小部件customBar(){}
,它基本上是一个 ButtonBar 小部件。代码是这样的:
Widget recipeButtonBar() {
return ButtonBar(
children: <Widget>[
Material(
color: Color(0xff75c760),
borderRadius: BorderRadius.circular(15),
clipBehavior: Clip.antiAlias,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 15,
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextButton(
onPressed: () {
print("Button 1 tapped");
},
child: Text(
"Button 1",
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontFamily: "Poppins",
fontWeight: FontWeight.w500,
),
),
),
],
),
),
),
TextButton(
child: Text('Button 1'),
onPressed: () {},
),
TextButton(
child: Text('Button 3'),
onPressed: () {},
),
TextButton(
child: Text('Button 4'),
onPressed: () {},
),
],
);
}
现在我无法弄清楚一件事:
- 我怎样才能把它变成一个动态的东西?我的意思是,当我单击按钮 2 时,我想要按钮 2 上的按钮 1 的效果
更新1:
class RecipeButtonBar extends StatefulWidget {
@override
_RecipeButtonBarState createState() => _RecipeButtonBarState();
}
class _RecipeButtonBarState extends State<RecipeButtonBar> {
// keep track of selected button
int buttonIndex = 0;
// set current button index
void setButtonIndex(int index) {
setState(() {
buttonIndex = index;
});
}
@override
Widget build(BuildContext context) {
return ButtonBar(
children: <Widget>[
Material(
color: Color(0xff75c760),
borderRadius: BorderRadius.circular(15),
clipBehavior: Clip.antiAlias,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 5,
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextButton(
onPressed: () {
print("Button 1 tapped");
setButtonIndex(0);
},
child: Text(
"Button 1",
style: TextStyle(
// add you dynamic colors here
color: buttonIndex == 0 ? Colors.white : Colors.blue,
fontSize: 12,
fontFamily: "Poppins",
fontWeight: FontWeight.w500,
),
),
),
],
),
),
),
TextButton(
child: Text(
"Button 2",
style: TextStyle(
// add you dynamic colors here
color: buttonIndex == 1 ? Colors.black : Colors.black,
fontSize: 12,
fontFamily: "Poppins",
fontWeight: FontWeight.w500,
),
),
onPressed: () {
setButtonIndex(1);
},
),
TextButton(
child: Text(
"Button 3",
style: TextStyle(
// add you dynamic colors here
color: buttonIndex == 2 ? Colors.black : Colors.black,
fontSize: 12,
fontFamily: "Poppins",
fontWeight: FontWeight.w500,
),
),
onPressed: () {
setButtonIndex(2);
},
),
TextButton(
child: Text(
"Button 4",
style: TextStyle(
// add you dynamic colors here
color: buttonIndex == 3 ? Colors.blue : Colors.black,
fontSize: 12,
fontFamily: "Poppins",
fontWeight: FontWeight.w500,
),
),
onPressed: () {
setButtonIndex(3);
},
),
],
);
}
}
我需要让另一个按钮获得绿色的容器,例如button 1
. 当我尝试这段代码时,我在右侧得到了一个渲染流。我能做些什么来解决它?
解决方案
class RecipeButtonBar extends StatefulWidget {
@override
_RecipeButtonBarState createState() => _RecipeButtonBarState();
}
class _RecipeButtonBarState extends State<RecipeButtonBar> {
// keep track of selected button
int buttonIndex = 0;
// set current button index
void setButtonIndex(int index) {
setState(() {
buttonIndex = index;
});
}
@override
Widget build(BuildContext context) {
return ButtonBar(
children: <Widget>[
Material(
color: Color(0xff75c760),
borderRadius: BorderRadius.circular(15),
clipBehavior: Clip.antiAlias,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 15,
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextButton(
onPressed: () {
print("Button 1 tapped");
setButtonIndex(0);
},
child: Text(
"Button 1",
style: TextStyle(
// add you dynamic colors here
color: buttonIndex == 0 ? Colors.white : Colors.blue,
fontSize: 12,
fontFamily: "Poppins",
fontWeight: FontWeight.w500,
),
),
),
],
),
),
),
TextButton(
child: Text(
"Button 2",
style: TextStyle(
// add you dynamic colors here
color: buttonIndex == 1 ? Colors.white : Colors.blue,
fontSize: 12,
fontFamily: "Poppins",
fontWeight: FontWeight.w500,
),
),
onPressed: () {
setButtonIndex(1);
},
),
TextButton(
child: Text(
"Button 3",
style: TextStyle(
// add you dynamic colors here
color: buttonIndex == 2 ? Colors.white : Colors.blue,
fontSize: 12,
fontFamily: "Poppins",
fontWeight: FontWeight.w500,
),
),
onPressed: () {
setButtonIndex(2);
},
),
TextButton(
child: Text(
"Button 4",
style: TextStyle(
// add you dynamic colors here
color: buttonIndex == 3 ? Colors.white : Colors.blue,
fontSize: 12,
fontFamily: "Poppins",
fontWeight: FontWeight.w500,
),
),
onPressed: () {
setButtonIndex(3);
},
),
],
);
}
}
基本上,您需要维护当前按下按钮的状态,以便您可以使用有状态小部件。