如何在三个容器之间切换

如何解决如何在三个容器之间切换

我正在开发一个咖啡店应用程序，在该应用程序中，我可以选择在三个杯子尺寸之间切换，如所附图像。

我希望所选的大小具有完全不透明性，而其他大小具有半不透明性。我编写的代码更改了所选大小的不透明度，但是当我选择其他大小时，其他大小的不透明度不会恢复到一半。像下面的图片一样，不透明度保持完整

类代码：

enum SizeType { small,medium,large }

class CupSize extends StatefulWidget {
  final String cupImage;
  final SizeType size;

  CupSize({
    Key key,this.cupImage,this.size,}) : super(key: key);
  @override
  _CupSizeState createState() => _CupSizeState();
}

class _CupSizeState extends State<CupSize> {
  double activeSizeOpacity = 1;
  double inActiveSizeOpacity = 0.5;
  double activeBorderOpacity = 1;
  double inActiveBorderOpacity = 0.0;
  SizeType selectedSize;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selectedSize = widget.size;
        });
      },child: Opacity(
        opacity: selectedSize == widget.size
            ? activeSizeOpacity
            : inActiveSizeOpacity,child: Column(
          children: [
            Container(
              margin: EdgeInsets.symmetric(horizontal: 10,vertical: 10),child: SvgPicture.asset(widget.cupImage),),Opacity(
              opacity: selectedSize == widget.size
                  ? activeBorderOpacity
                  : inActiveBorderOpacity,child: Container(
                color: kSecondaryColor,height: 3,width: 14,],);
  }
}

班级建设：

Row(
                  mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.end,children: [
                    CupSize(
                      cupImage: 'assets/images/size_small.svg',size: SizeType.small,CupSize(
                      cupImage: 'assets/images/size_medium.svg',size: SizeType.medium,CupSize(
                      cupImage: 'assets/images/size_large.svg',size: SizeType.large,)

解决方法

问题是您将杯子的状态保存在CupSize类中，而不是保存在构造CupSize实例的有状态小部件中。以下代码使用回调，并且可以正常工作：

class CupSize extends StatefulWidget {
  final String cupImage;
  final bool isSelected; 
  final Function onTapCallback;     //the variables are changed

  CupSize({
    Key key,this.cupImage,this.onTapCallback,this.isSelected,}) : super(key: key);
  @override
  _CupSizeState createState() => _CupSizeState();
}

class _CupSizeState extends State<CupSize> {
  double activeSizeOpacity = 1;
  double inActiveSizeOpacity = 0.5;
  double activeBorderOpacity = 1;
  double inActiveBorderOpacity = 0.0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onTapCallback(),//This is changed
      child: Opacity(
        opacity: widget.isSelected    //This is changed
            ? activeSizeOpacity
            : inActiveSizeOpacity,child: Column(
          children: [
            Container(
              margin: EdgeInsets.symmetric(horizontal: 10,vertical: 10),child: SvgPicture.asset(widget.cupImage),),Opacity(
              opacity: widget.isSelected      //This is changed
                  ? activeBorderOpacity
                  : inActiveBorderOpacity,child: Container(
                color: kSecondaryColor,height: 3,width: 14,],);
  }
}

//Add this in the State class 
SizeType selectedSize;

....


Row(
                  mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.end,children: [

                    //initalize the CupSizes with the new variables
                    CupSize(
                      isSelected: selectedSize == SizeType.small,cupImage: 'assets/images/size_small.svg',onTapCallback: (){
                              setState((){
                                   selectedSize = SizeType.small
                                   });
                                }
                    ),CupSize(
                      isSelected: selectedSize == SizeType.medium,cupImage: 'assets/images/size_medium.svg',onTapCallback: (){
                              setState((){
                                   selectedSize = SizeType.medium
                                   });
                                }
                    ),CupSize(
                      isSelected: selectedSize == SizeType.large,cupImage: 'assets/images/size_large.svg',onTapCallback: (){
                              setState((){
                                   selectedSize = SizeType.large
                                   });
                                }
                    ),)

,

尝试初始化大小类型以查看发生了什么。

尝试在您运行的Mian小部件中设置setState