如何根据 boolean 值更改屏幕上的小部件？
[英]How can I change a widget on screen according a boolean value?
问题描述
I have a switch that returns true or false according to the user action.
我有一个根据用户操作返回 true 或 false 的开关。 When the value is true, I want to change a specific height in another widgets and change others boolean variables too.当该值为 true 时，我想更改其他小部件中的特定高度并更改其他 boolean 变量。 Doing this I hope that some widgets become different.这样做我希望一些小部件变得不同。 However, when I change the values, nothing happens.但是，当我更改值时，什么也没有发生。 Below is my code:下面是我的代码：
import 'package:flutter/material.dart';
class CreateMatch extends StatefulWidget {
@override
_CreateMatchState createState() => _CreateMatchState();
}
class _CreateMatchState extends State<CreateMatch> {
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
bool _isSwitched = false;
bool boolDivider = false;
bool boolRow = false;
double heightContainer = height * 0.36; //0.43
double heightCard = height * 0.102; //0.18
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/fundo.png"),
fit: BoxFit.cover,
),
),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Align(
alignment: Alignment.center,
child: Container(
height: heightContainer, //36
width: width,
margin: EdgeInsets.only(left: 10, right: 10),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)
),
color: Color(0xFFD2DCE8),
child: Column(
//mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 0.02
),
],
),
margin: EdgeInsets.only(top: 10, left: 10, right: 10),
//color: Colors.blue,
height: height * 0.102,
width: width,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 10),
child: Text("Tempo de partida", style: TextStyle(fontFamily: "Nunito-Bold", fontSize: 18, fontWeight: FontWeight.bold, color: Color(0xFF153E7D),
shadows: <Shadow>[
Shadow(
offset: Offset(1.0, 1.0),
blurRadius: 1.0,
color: Colors.black,
)],
)),
),
InkWell(
onTap: (){},
child: Container(margin: EdgeInsets.only(left: width * 0.17),child: Image.asset("assets/botao_recuar.png", height: 35,)),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.green,
),
margin: EdgeInsets.only(left: 10, right: 10),
alignment: Alignment.center,
width: width * 0.13,
height: 35,
child: Text("00:00", style: TextStyle(fontFamily: "Nunito-Bold", fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white,
shadows: <Shadow>[
Shadow(
offset: Offset(1.0, 1.0),
blurRadius: 5.0,
color: Colors.black,
),
],
)),
),
InkWell(
onTap: (){},
child: Container(child: Image.asset("assets/botao_avancar.png", height: 35,)),
),
],
),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 0.02
),
],
),
margin: EdgeInsets.only(top: 10, left: 10, right: 10),
//color: Colors.blue,
height: heightCard, //0.102
width: width,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 10),
child: Text("Apostas", style: TextStyle(fontFamily: "Nunito-Bold", fontSize: 18, fontWeight: FontWeight.bold, color: Color(0xFF153E7D),
shadows: <Shadow>[
Shadow(
offset: Offset(1.0, 1.0),
blurRadius: 1.0,
color: Colors.black,
)],
)),
),
Container(
margin: EdgeInsets.only(left: width * 0.49),
child: Transform.scale(
alignment: Alignment.center,
scale: 2.0,
child: Switch(
onChanged: (bool val) {
print(_isSwitched);
setState(() {
_isSwitched = val;
});
print(_isSwitched);
if(_isSwitched == true){
setState(() {
boolDivider = true;
boolRow = true;
heightContainer = height * 0.43;
heightCard = height * 0.18;
});
}else{
setState(() {
boolDivider = false;
boolRow = false;
heightContainer = height * 0.36;
heightCard = height * 0.102;
});
}
},
value: _isSwitched,
activeThumbImage: AssetImage("assets/button_switch_green.png"),
inactiveThumbImage: AssetImage("assets/button_switch_red.png"),
activeColor: Colors.green,
),
),
),
],
),
Visibility(
visible: boolDivider,
child: Container(
margin: EdgeInsets.only(left: 10, right: 10, bottom: 5),
child: Divider(
color: Colors.blue,
thickness: 2,
),
),
),
Visibility(
visible: boolRow,
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 10),
child: Text("Valor", style: TextStyle(fontFamily: "Nunito-Bold", fontSize: 18, fontWeight: FontWeight.bold, color: Color(0xFF153E7D),
shadows: <Shadow>[
Shadow(
offset: Offset(1.0, 1.0),
blurRadius: 1.0,
color: Colors.black,
)],
)),
),
Stack(
children: <Widget>[
InkWell(
onTap: (){},
child: Container(margin: EdgeInsets.only(left: width * 0.30),child: Image.asset("assets/botao_recuar.png", height: 35,)),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.green,
),
margin: EdgeInsets.only(left: width * 0.4, right: 10),
alignment: Alignment.center,
width: width * 0.23,
height: 35,
child: Text("1000", textAlign: TextAlign.center, style: TextStyle(fontFamily: "Nunito-Bold", fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white,
shadows: <Shadow>[
Shadow(
offset: Offset(1.0, 1.0),
blurRadius: 5.0,
color: Colors.black,
),
],
)),
),
Container(
margin: EdgeInsets.only(left: width * 0.36),
child: Image.asset("assets/moeda.png", width: 38, height: 35,),
),
InkWell(
onTap: (){},
child: Container(margin: EdgeInsets.only(left: width * 0.65),child: Image.asset("assets/botao_avancar.png", height: 35,)),
),
],
),
],
),
),
],
),
),
),
Row(
children: <Widget>[
InkWell(
onTap: () => print('hello'),
child: Container(
margin: EdgeInsets.only(top: 10, left: 30),
height: 50.0,
width: width * 0.35,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/button_marrom.png"),
fit: BoxFit.cover
),
//color: green,
//border: Border.all(color: Colors.lightGreenAccent, width: 2.0),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(child: Text(
'Voltar', style: TextStyle(fontFamily: 'Nunito-Bold',
fontSize: 25.0, color: Colors.white, fontWeight: FontWeight.bold,
shadows: <Shadow>[
Shadow(
offset: Offset(1.0, 1.0),
blurRadius: 3.0,
color: Colors.black,
),
],
),),),
),
),
InkWell(
onTap: () => print('hello'),
child: Container(
margin: EdgeInsets.only(top: 10, left: 30),
height: 50.0,
width: width * 0.35,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/button.jpeg"),
fit: BoxFit.cover
),
//color: green,
//border: Border.all(color: Colors.lightGreenAccent, width: 2.0),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(child: Text(
'Jogar', style: TextStyle(fontFamily: 'Nunito-Bold',
fontSize: 25.0, color: Colors.white, fontWeight: FontWeight.bold,
shadows: <Shadow>[
Shadow(
offset: Offset(1.0, 1.0),
blurRadius: 3.0,
color: Colors.black,
),
],
),),),
),
),
],
),
],
),
),
),
),
),
);
}
}
1 个解决方案
解决方案1
1 已采纳 2019-11-02 00:39:56
The problem here is that you initialise heightContainer and heightCard inside build method.这里的问题是您在 build 方法中初始化heightContainer和heightCard 。
Every time setState called rebuilds the widget, so here you change heightContainer inside setState and then you reinitialise it to double heightContainer = height * 0.36;每次调用 setState 都会重新构建小部件，因此在这里您更改 setState 内的heightContainer ，然后将其重新初始化为double heightContainer = height * 0.36; . .
You can fix this by doing:您可以通过以下方式解决此问题：
class _CreateMatchState extends State<CreateMatch> {
bool _isSwitched;
bool boolDivider;
bool boolRow;
double heightContainer;
double heightCard;
@override
void initState() {
super.initState();
_isSwitched = false;
boolDivider = false;
boolRow = false;
heightContainer = 0.0;
heightCard = 0.0;
}
@override
Widget build(BuildContext context) {
final double width = MediaQuery.of(context).size.width;
final double height = MediaQuery.of(context).size.height;
if (_isSwitched) {
heightContainer = height * 0.43;
heightCard = height * 0.18;
} else {
heightContainer = height * 0.36; //0.43
heightCard = height * 0.102;
}
...
and i will also change我也会改变
child: Switch(
onChanged: (bool val) {
print('_isSwitched $_isSwitched');
setState(() {
_isSwitched = val;
if (_isSwitched == true) {
boolDivider = true;
boolRow = true;
} else {
boolDivider = false;
boolRow = false;
}
});
...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用提供者/状态管理（在颤动中）根据值的变化显示或隐藏小部件？ - How can I display or hide widget according to change in value using provider / State management( In flutter)?
如何根据颤动中的屏幕更改文本大小和小部件大小？ - How to change textsize and widget size according to screen in flutter?
如何根据条件 getx 呈现小部件？ - how can i render a widget according to condition getx?
如何创建抽屉的有状态小部件，其列表项 onClick 将更改同一屏幕的内容？ - How can I create a Stateful Widget of a drawer whose list item onClick will change the content of a same screen?
如何动态更改小部件的属性？ - How can i dynamically change the properties of a widget?
如何根据另一个窗口小部件的动作来更改窗口小部件的状态？ - How can I change the state of widget based on the action of another widget?
如何根据屏幕大小颤动设置小部件位置 - how to set a widget place according to screen size flutter
如何根据listView项更改屏幕颜色 - How to change screen color according to listView item
Flutter：如何将文本小部件中心放在屏幕上 - Flutter: How can i put the text widget center in screen
如何根据 flutter 中的不同屏幕尺寸对齐堆栈内的小部件 - How to align widget inside stack according to different screen sizes in flutter
相关标签