基于布尔值显示或隐藏文本小部件

Question

我使用的这个包可以切换布尔变量值。我正在使用这个布尔变量来显示/隐藏一个文本小部件。尽管值发生了变化，但小部件根本不受影响。我在这里错过了什么？

SwitcherButton(
key: UniqueKey(),
value: showDiscount,
onColor: Colors.greenAccent,
offColor: Colors.grey,
onChange: (value) {
showDiscount = !value;
}),

if(showDiscount) Text('Hello')

Answer 1

您正在使showDiscount = !value;使用statefullWidget。但是你的错误是没有使用setState()更换

onChange: (value) {
showDiscount = !value;
}),

带有

onChange: (value) {
setState((){  showDiscount = !value;})
}),

我建议使用Visibility小部件。它控制任何Widget的可见性。它在看不见的时候不会变大。

这是演示：

import 'package:flutter/material.dart';
import 'package:switcher_button/switcher_button.dart';
class HideAndSeek extends StatefulWidget {
HideAndSeek({Key? key}) : super(key: key);
@override
_HideAndSeekState createState() => _HideAndSeekState();
}
class _HideAndSeekState extends State<HideAndSeek> {
bool _isVisible = true;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: [
Text("Hey Check It "),
SwitcherButton(
value: true,
onChange: (value) {
setState(() {
_isVisible = value;
});
},
),
Visibility(
visible: _isVisible,
child: new Text('Boom'),
),
if (_isVisible) Text("Hoiaaaaaaa"),
Icon(Icons.upcoming),
],
),
),
);
}
}

Answer 2

如果您正在使用无状态小部件，请使用有状态小部件并在onChange 中添加setState方法

onChange: (value) {
setState(() {
showDiscount = !value;
});
}),

Answer 3

您需要设置状态并更改测试，如下所示。

SwitcherButton(
key: UniqueKey(),
value: showDiscount,
onColor: Colors.greenAccent,
offColor: Colors.grey,
onChange: (value) {
setState(){
showDiscount = !value;
}
}),

showDiscount ? Text('Hello') : Container(),