flutter - 在 flutter 中切换按钮状态

Question

我正在使用三个自定义按钮制作简单的 flutter 应用程序，当我单击一个按钮时，它会更改此按钮的背景颜色。我想要实现的是，当我在其他按钮被激活时单击按钮时，我想停用按钮并激活我刚刚单击的按钮。自定义按钮由 CircleButton 类表示，我在 HomePageClass 的主要构建中使用了其中三个。

我想知道应该在哪里关闭和打开相应的按钮，在我看来，一切都应该在 CircleButton 类中处理。

圆形按钮类:

class CircleButton extends StatefulWidget {
  final VoidCallback onPressed;
  final String imageData;
  final String buttonName;
  CircleButton({this.onPressed, this.imageData, this.buttonName});
  @override
  _CircleButtonState createState() => _CircleButtonState();
}

class _CircleButtonState extends State<CircleButton> {
  bool _active = false;
  //bool isButtonActive = false;
  void handleTap() {
    setState(() {
      /*
      if(widget.buttonName == 'Mode'){
      }
      if(widget.buttonName =='Sounds'){
      }
      if(widget.buttonName =='Volume'){
      }
      isButtonActive = !isButtonActive;
      */
      _active = !_active;
      widget.onPressed();
    });
    //print('widget.isActive:' + isButtonActive.toString());
  }

  @override
  Widget build(BuildContext context) {
    double circleBoxSize = 50.0;
    return new Column(
      children: <Widget>[
        FlatButton(
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
          onPressed: handleTap,
          child: new Container(
            width: circleBoxSize,
            height: circleBoxSize,
            decoration: new BoxDecoration(
                gradient: _active
                    ? LinearGradient(
                        begin: Alignment.bottomLeft,
                        end: Alignment.topRight,
                        colors: [
                            Color.fromRGBO(79, 172, 254, 1),
                            Color.fromRGBO(0, 242, 245, 1)
                          ])
                    : null,
                shape: BoxShape.circle,
                color: _active ? null : Color.fromRGBO(227, 230, 238, 1)),
            child: new Image.asset(
              this.widget.imageData,
              color: _active ? Color.fromRGBO(255, 255, 255, 1) : null,
              scale: 1.8,
            ),
          ),
        ),
        SizedBox(height: 14),
        new Text(
          this.widget.buttonName,
          style: TextStyle(
              fontFamily: "Roboto",
              fontSize: 14,
              color: Color.fromRGBO(140, 151, 173, 1),
              fontWeight: FontWeight.normal),
        )
      ],
    );
  }
}

我在其中使用 CircleButton 对象的主页:

class _HomePageState extends State<HomePage> {
  bool _active = false;
  int iter = 0;
  String activeButton;
  List<String> selectBarData = ['dasdasdas'];
  List<String> modes = ['deep-sleep', 'pain-relief'];
  List<String> sounds = ['campfire', 'rain'];

  void handleButtonsPress(){
    setState(){

    }
  }


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Column(
        children: <Widget>[
          Container(
              padding: EdgeInsets.only(left: 25, right: 25, top: 60),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <CircleButton>[
                  new CircleButton(
                    onPressed: handleButtonsPress,
                    imageData: 'assets/body-organ.png',
                    buttonName: 'Mode',
                  ),
                  new CircleButton(
                    onPressed: handleButtonsPress,
                    imageData: 'assets/audio.png',
                    buttonName: 'Sounds',
                  ),
                  new CircleButton(
                    onPressed: handleButtonsPress,
                    imageData: 'assets/speaker.png',
                    buttonName: 'Volume',
                  )
                ],
              )),
          selectBar()
        ],
      )),
    );
  }
}

当我启动应用程序并单击第一个按钮时，它看起来像这样:

当我点击第二个按钮时，它看起来像这样:

但我想要这样的结果:

Answer 1

我没有机会对此进行测试，但它应该可以工作。我创建了一个 ValueChange 回调，它将按钮的分配标签返回给父级。这允许您根据 _active 是否等同于按钮的标签来更改按钮的状态(事件或不活动)。希望这是有道理的。这是代码，我更改的某些部分中有注释。如果您有任何疑问或问题，请告诉我!

首页:

class _HomePageState extends State<HomePage> {
  String _active;
  int iter = 0;
  String activeButton;
  List<String> selectBarData = ['dasdasdas'];
  List<String> modes = ['deep-sleep', 'pain-relief'];
  List<String> sounds = ['campfire', 'rain'];

  // ValueChanged<String> callback
  void active(String btn) {
    setState(() => _active = btn);
  }


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Column(
        children: <Widget>[
          Container(
              padding: EdgeInsets.only(left: 25, right: 25, top: 60),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <CircleButton>[
                  new CircleButton(
                    action: active, //pass data from child to parent
                    tag: "button1", //specifies attribute of button
                    active: _active == "button1" ? true : false, //set button active based on value in this parent
                    imageData: 'assets/body-organ.png',
                    buttonName: 'Mode',
                  ),
                  new CircleButton(
                    action: active,
                    tag: "button2",
                    active: _active == "button2" ? true : false,
                    imageData: 'assets/audio.png',
                    buttonName: 'Sounds',
                  ),
                  new CircleButton(
                    action: active,
                    tag: "button3",
                    active: _active == "button2" ? true : false,
                    imageData: 'assets/speaker.png',
                    buttonName: 'Volume',
                  )
                ],
              )),
          selectBar()
        ],
      )),
    );
  }
}

按钮:

class CircleButton extends StatefulWidget {
  final ValueChanged<String> action; //callback value change
  final String tag; //tag of button
  final String imageData;
  final String buttonName;
  final bool active; // state of button
  CircleButton({this.action, this.imageData, this.buttonName, this.active, this.tag});
  @override
  _CircleButtonState createState() => _CircleButtonState();
}

class _CircleButtonState extends State<CircleButton> {
  void handleTap() {
    setState(() {
      widget.action(widget.tag);
    });
  }

  @override
  Widget build(BuildContext context) {
    double circleBoxSize = 50.0;
    return new Column(
      children: <Widget>[
        FlatButton(
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
          onPressed: handleTap,
          child: new Container(
            width: circleBoxSize,
            height: circleBoxSize,
            decoration: new BoxDecoration(
                gradient: widget.active
                    ? LinearGradient(
                        begin: Alignment.bottomLeft,
                        end: Alignment.topRight,
                        colors: [
                            Color.fromRGBO(79, 172, 254, 1),
                            Color.fromRGBO(0, 242, 245, 1)
                          ])
                    : null,
                shape: BoxShape.circle,
                color: widget.active ? null : Color.fromRGBO(227, 230, 238, 1)),
            child: new Image.asset(
              this.widget.imageData,
              color: widget.active ? Color.fromRGBO(255, 255, 255, 1) : null,
              scale: 1.8,
            ),
          ),
        ),
        SizedBox(height: 14),
        new Text(
          this.widget.buttonName,
          style: TextStyle(
              fontFamily: "Roboto",
              fontSize: 14,
              color: Color.fromRGBO(140, 151, 173, 1),
              fontWeight: FontWeight.normal),
        )
      ],
    );
  }
}

希望这对您有所帮助!