flutter - 如何在三个容器之间切换

Question

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

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

类(class)代码:

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

类(class) build :

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,
                    ),
                  ],
                )

Answer 1

问题在于您将杯子的状态保存在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
                                   });
                                }
                    ),
                  ],
                )