如何在三个容器之间切换

Question

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

我希望 selected 尺寸具有完全不透明度，而其他尺寸具有半不透明度。我编写的代码更改了 selected 尺寸的不透明度，但是当我 select 不同尺寸时，其他尺寸的不透明度不会恢复到一半。不透明度保持完整，如下图所示

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施工：

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

尝试初始化 sizetype 看看发生了什么。

尝试在您运行

的 Mian 小部件中设置状态

Answer 2

问题是您将杯子的状态保存在 CupSize class 中，而不是在构建 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
                                   });
                                }
                    ),
                  ],
                )

如何在三个容器之间切换

How to Toggle between three Containers

e-commerce

dart

flutter