我正在使用一个咖啡店应用程序,在该应用程序中,我可以选择在三个杯子尺寸之间切换,如所附图像。
我希望选定的大小具有完全的不透明度,而其他具有一半的不透明度。我编写的代码更改了所选大小的不透明度,但是当我选择其他大小时,其他大小的不透明度不会恢复到一半。浑浊度保持完整,如下面的图片所示
类(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,
),
],
)
最佳答案
问题在于您将杯子的状态保存在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
});
}
),
],
)
关于flutter - 如何在三个容器之间切换,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/63430114/