Dart 选择其他按钮时取消选择按钮

我创建了一个自定义按钮，可以根据

bool pressAttention

参数更改其图像和文本颜色

class UserButton extends StatefulWidget {
  final String unselectedImagePath;
  final String selectedImagePath;
  final String text;

  UserButton({
    this.unselectedImagePath, 
    this.selectedImagePath, 
    this.text,
    });

  @override
  State<StatefulWidget> createState() => _UserButtonState();
}

class _UserButtonState extends State<UserButton> {
  bool pressAttention = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Ink.image(
          image: pressAttention
              ? AssetImage(widget.selectedImagePath)
              : AssetImage(widget.unselectedImagePath),
          fit: BoxFit.cover,
          width: 150.0,
          height: 150.0,
          child: InkWell(
            splashColor: Colors.transparent,
            highlightColor: Colors.transparent,
            onTap: () {
              setState(() {
                pressAttention = !pressAttention;
              });
            },
          ),
        ),
        Padding(
          padding: EdgeInsets.only(top: 30.0),
          child: Text(
            widget.text,
            style: TextStyle(
              color: pressAttention
                  ? Theme.of(context).accentColor
                  : Colors.white,
              fontFamily: "Roboto",
              fontSize: 18.0
            ),
          ),
        )
      ],
    );
  }
}

class UserButton扩展StatefulWidget{
最后一个未选择的字符串edimagepath；
最终字符串selectedImagePath；
最终字符串文本；
用户按钮({
此.unselectedImagePath，
此选项。选择图像路径，
这个文本，
});
@凌驾
State createState（）=>\u UserButtonState（）；
}
类_UserButtonState扩展状态{
bool-pressAttention=false；
@凌驾
小部件构建（构建上下文）{
返回列(
儿童：[
墨水图像(
图片：按注意
？AssetImage（小部件。选择图像路径）
：AssetImage（widget.unselectedImagePath），
适合：BoxFit.cover，
宽度：150.0，
高度：150.0，
孩子：InkWell(
splashColor:Colors.transparent，
highlightColor:Colors.transparent，
onTap:（）{
设置状态（）{
按注意=！按注意；
});
},
),
),
填充物(
填充：仅限边缘设置（顶部：30.0），
子：文本(
widget.text，
样式：TextStyle(
颜色：按注意
主题。背景。强调颜色
：颜色。白色，
fontFamily：“机器人”，
字体大小：18.0
),
),
)
],
);
}
}

然后在我的主课上把它们膨胀成这样：

Padding(
            padding: EdgeInsets.only(top: 100.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                UserButton(
                  selectedImagePath: 'assets/whistle_orange.png',
                  unselectedImagePath: 'assets/whistle.png',
                  text: "Coach",
                ),
                Container(width: 30.0,),
                UserButton(
                  selectedImagePath: 'assets/weight_orange.png',
                  unselectedImagePath: 'assets/weight.png',
                  text: "Student",
                )
              ],
            ),
          ),

填充(
填充：仅限边缘设置（顶部：100.0），
孩子：排(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
用户按钮(
选择图像路径：“assets/whist_orange.png”，
取消选择图像路径：“assets/whistle.png”，
文本：“Coach”，
),
容器（宽度：30.0，），
用户按钮(
选择图像路径：“资产/权重_orange.png”，
取消选择图像路径：“assets/weight.png”，
正文：“学生”，
)
],
),
),

当两个按钮各自正常工作时，我需要禁用第一个按钮（更改

按Attention

并调用

设置状态（）

），反之亦然

---

如何实现这一点？

您可以处理来自父窗口小部件的状态并将其传递给您的孩子，这是一个如何实现这一点的示例，当然您可以改进代码并创建自己的按钮“父”控制器：

    class UserButton extends StatefulWidget {
      final String unselectedImagePath;
      final String selectedImagePath;
      final String text;
      final VoidCallback onTap;
      final bool selected;

      UserButton({
        this.unselectedImagePath,
        this.selectedImagePath,
        this.text,
        this.selected,
        this.onTap,
      });

      @override
      State<StatefulWidget> createState() => _UserButtonState();
    }

    class _UserButtonState extends State<UserButton> {
      bool pressAttention = false;

      @override
      Widget build(BuildContext context) {
        pressAttention = widget.selected;
        return Column(
          children: <Widget>[
            Ink.image(
              image: pressAttention
                  ? AssetImage(widget.selectedImagePath)
                  : AssetImage(widget.unselectedImagePath),
              fit: BoxFit.cover,
              width: 150.0,
              height: 150.0,
              child: InkWell(
                splashColor: Colors.transparent,
                highlightColor: Colors.transparent,
                onTap: () {
                  setState(() {
                    pressAttention = !pressAttention;
                  });
                  if (widget.onTap != null) widget.onTap();
                },
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 30.0),
              child: Text(
                widget.text,
                style: TextStyle(
                    color: pressAttention
                        ? Theme.of(context).accentColor
                        : Colors.white,
                    fontFamily: "Roboto",
                    fontSize: 18.0),
              ),
            )
          ],
        );
      }
    }

    class ParentMain extends StatefulWidget {
      @override
      _ParentMainState createState() => _ParentMainState();
    }

    class _ParentMainState extends State<ParentMain> {
      bool selectedButtonCoach = false;
      bool selectedButtonStudent = false;

      @override
      Widget build(BuildContext context) {
        return Container(
          child: Padding(
            padding: EdgeInsets.only(top: 100.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                UserButton(
                  selectedImagePath: 'assets/whistle_orange.png',
                  unselectedImagePath: 'assets/whistle.png',
                  text: "Coach",
                  selected: selectedButtonCoach,
                  onTap: () {
                    setState(() {
                      selectedButtonCoach = true;
                      selectedButtonStudent = false;
                    });
                  },
                ),
                Container(
                  width: 30.0,
                ),
                UserButton(
                  selectedImagePath: 'assets/weight_orange.png',
                  unselectedImagePath: 'assets/weight.png',
                  text: "Student",
                  selected: selectedButtonStudent,
                  onTap: () {
                    setState(() {
                      selectedButtonCoach = false;
                      selectedButtonStudent = true;
                    });
                  },
                )
              ],
            ),
          ),
        );
      }
    }

class UserButton扩展StatefulWidget{
最后一个未选择的字符串edimagepath；
最终字符串selectedImagePath；
最终字符串文本；
最终确认为onTap；
最终选定目标；
用户按钮({
此.unselectedImagePath，
此选项。选择图像路径，
这个文本，
这个,选择,，
这个.onTap，
});
@凌驾
State createState（）=>\u UserButtonState（）；
}
类_UserButtonState扩展状态{
bool-pressAttention=false；
@凌驾
小部件构建（构建上下文）{
按Attention=widget.selected；
返回列(
儿童：[
墨水图像(
图片：按注意
？AssetImage（小部件。选择图像路径）
：AssetImage（widget.unselectedImagePath），
适合：BoxFit.cover，
宽度：150.0，
高度：150.0，
孩子：InkWell(
splashColor:Colors.transparent，
highlightColor:Colors.transparent，
onTap:（）{
设置状态（）{
按注意=！按注意；
});
如果（widget.onTap！=null）widget.onTap（）；
},
),
),
填充物(
填充：仅限边缘设置（顶部：30.0），
子：文本(
widget.text，
样式：TextStyle(
颜色：按注意
主题。背景。强调颜色
：颜色。白色，
fontFamily：“机器人”，
字体大小：18.0），
),
)
],
);
}
}
类ParentMain扩展了StatefulWidget{
@凌驾
_ParentMainState createState（）=>\u ParentMainState（）；
}
类_ParentMainState扩展状态{
bool selectedButtonCoach=false；
bool selectedButtonStudent=false；
@凌驾
小部件构建（构建上下文）{
返回容器(
孩子：填充(
填充：仅限边缘设置（顶部：100.0），
孩子：排(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
用户按钮(
选择图像路径：“assets/whist_orange.png”，
取消选择图像路径：“assets/whistle.png”，
文本：“Coach”，
选中：选中按钮打开，
onTap:（）{
设置状态（）{
SelectedButtonCach=true；
selectedButtonStudent=false；
});
},
),
容器(
宽度：30.0，
),
用户按钮(
选择图像路径：“资产/权重_orange.png”，
取消选择图像路径：“assets/weight.png”，
正文：“学生”，
已选：已选按钮学生，
onTap:（）{
设置状态（）{
selectedButtonCoach=false；
selectedButtonStudent=true；
});
}