按钮栏小部件在按下时更改按钮的颜色

Question

我编写了一个名为 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: () {},
        ),
      ],
    );
  }

现在我想不出一件事：

1. 我怎样才能把它变成一个动态的东西？我的意思是当我点击按钮 2 时，我想要按钮 1 对按钮 2 的效果

更新 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。当我尝试这段代码时，我在右边得到了一个渲染流。我能做些什么来解决它？

Answer 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);
          },
        ),
      ],
    );
}

}

基本上，您需要维护当前按下按钮的状态，以便您可以使用有状态的小部件。