问题描述
每当我尝试更改可见性的状态时，setState 都不起作用，尽管在控制台中打印的消息已得到纠正。这是我的浮动操作按钮，周围环绕着几个小部件。问题是每当我点击它时，isVisible 属性应该已更改为 false 并且它应该是不可见的，但这并没有发生。控制台打印“pressed undo”。
import 'package:Flutter/cupertino.dart';
import 'package:Flutter/material.dart';
import 'package:Flutter/services.dart';
import 'package:maya/screens/profile.dart';
import 'package:maya/screens/screen.dart';
import 'package:maya/screens/settings.dart';
import 'package:avatar_glow/avatar_glow.dart';
import 'package:tcard/tcard.dart';
import 'package:glass_kit/glass_kit.dart';
import 'package:Fluttertoast/Fluttertoast.dart';
class MainPage extends StatefulWidget {
@override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
double likeBtnWidth = 75;
double dislikeBtnWidth = 75;
TCardController _controller = TCardController();
int cardNumber;
bool isVisible; //here is the declaration
Widget _layoutDetails() {
@override
Orientation orientation = MediaQuery.of(context).orientation;
setState(() {
likeBtnWidth = 150;
dislikeBtnWidth = 150;
});
List<String> images = [
'assets/images/girls/girl1.png','assets/images/girls/girl2.png','assets/images/girls/girl3.png','assets/images/girls/girl4.png','assets/images/girls/girl5.png','assets/images/girls/girl6.png',];
List<String> personalDetails = [
'Prakriti Regmi%20%Lets read Murakami together.%Chabahil (1 mi away)','Dristi Sigdel%19%Belle áme%sundhara (2 mi away)','Prajita Upreti%19%Here to make friends.%Makalbari (2.3 mi away)','Sugandhi C.%21%Not looking for any drama.%Bhaktapur (7 mi away)',"Pawana Shrestha%20%Why am I here for?%Attarkhel","Tanuja Shrestha%21%Hi there! ♐︎%Dakshin Dhoka"
];
List<Widget> cards = List.generate(
images.length < personalDetails.length
? images.length
: personalDetails.length,(int index) {
return GlassContainer.frostedGlass(
height: 800,width: 800,child: Padding(
padding: const EdgeInsets.fromLTRB(30,20,30,0),child: Container(
child: Stack(
children: [
Column(
children: [
SizedBox(
height: 20,),Center(child: _picture(images[index])),SizedBox(
height: 30,_bio(personalDetails[index].split("%")),SizedBox(
height: 10,_likeUnlikeButtons()
],Positioned(
left: 0,bottom: 15,child: SizedBox(
width: 30,child: Visibility(
visible: isVisible,child: FloatingActionButton(
onpressed: () {
setState(() {
isVisible = false; //this is the problamatic part.
print("pressed undo");
});
},child: Text("helllllo"),)
replacement: Container(),],)),);
// );
},);
return SizedBox(
width: double.infinity,height: double.infinity,child: TCard(
controller: _controller,onForward: (index,info) {
if (info.direction == SwipDirection.Right) {
Fluttertoast.showToast(
msg: "Liked",toastLength: Toast.LENGTH_SHORT,gravity: ToastGravity.CENTER,timeInSecForIosWeb: 1,backgroundColor: Colors.yellow,textColor: Colors.black,fontSize: 16.0);
}
setState(() {
isFirstCard = false;
});
},onBack: (index,info) {
// _controller.forward(SwipDirection);
// print(index);
},onEnd: () {
_controller.reset();
},size: Size(double.infinity,double.infinity),cards: cards,);
);
}
}
@override
Widget build(BuildContext context) {
return _layoutDetails();
}
}
),);
}
}
解决方法
我个人使用 Provider 进行状态管理，但这是我演示使用 setState 更改值的最快方法。在我看来，您正在尝试更新方法内部的状态，而不是更新正在显示的构建上下文内部的状态。因为 setState 是在 build 方法之外调用的，所以 build 方法不知道用新值重建。
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: MainPage(),));
}
class MainPage extends StatefulWidget {
@override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
Color go = Colors.green;
Color stop = Colors.red;
// the variable we are tracking the state of
bool stackIsGo;
// custom widget that takes a bool as input
Widget _moreWidgets(bool changeColor) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,children: [
Container(
color: changeColor ? Colors.greenAccent : Colors.deepPurple,height: 44,width: 44,),],);
}
@override
Widget build(BuildContext context) {
// the variable the build context is going to build with.
// since stackIsGo hasn't been given a value yet,and we can't // initialize a null value,if stackIsGo is null we assign
// true to changeVisibility.
bool changeVisibility = stackIsGo ?? true;
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.stretch,children: [
Center(
child: Stack(
children: [
Container(
height: 44,//
color: changeVisibility ? go : stop,Positioned.fill(
child: Visibility(
//
visible: !changeVisibility,replacement: SizedBox.shrink(),child: Icon(Icons.warning_rounded),FloatingActionButton(
child: Icon(Icons.visibility),onPressed: () {
setState(() {
// by using setState inside of the build method,// we trigger a widget rebuild with the new value.
if (stackIsGo == null) stackIsGo = true;
stackIsGo = !stackIsGo;
});
},_moreWidgets(changeVisibility),);
}
}
您可以尝试将 _layoutDetails() Widget 树中的值放入
@override
Widget build(BuildContext context) {
}
这样每次调用 setState 函数时，它也会重建小部件树。
像这样：
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: personalDetails.length,itemBuilder: (context,index) {
return GlassContainer.frostedGlass(
height: 800,width: 800,child: Padding(
padding: const EdgeInsets.fromLTRB(30,20,30,0),child: Container(
child: Stack(
children: [
Column(
children: [
SizedBox(
height: 20,Center(child: _picture(images[index])),SizedBox(
height: 30,_bio(personalDetails[index].split("%")),SizedBox(
height: 10,_likeUnlikeButtons()
],Positioned(
left: 0,bottom: 15,child: SizedBox(
width: 30,child: Visibility(
visible: isVisible,child: FloatingActionButton(
onPressed: () {
setState(() {
isVisible = false; //this is the problamatic part.
print("pressed undo");
});
},child: Text("helllllo"),)
replacement: Container(),)),);
},);
}
您可以在函数 _layoutDetails 之外声明 List，以便构建方法可以访问它。
/// Populate data for list.
List<String> personalDetails = [
'Prakriti Regmi%20%Lets read Murakami together.%Chabahil (1 mi away)','Dristi Sigdel%19%Belle áme%Sundhara (2 mi away)','Prajita Upreti%19%Here to make friends.%Makalbari (2.3 mi away)','Sugandhi C.%21%Not looking for any drama.%Bhaktapur (7 mi away)',"Pawana Shrestha%20%Why am I here for?%Attarkhel","Tanuja Shrestha%21%Hi there! ♐︎%Dakshin Dhoka"
];
List<String> images = [
'assets/images/girls/girl1.png','assets/images/girls/girl2.png','assets/images/girls/girl3.png','assets/images/girls/girl4.png','assets/images/girls/girl5.png','assets/images/girls/girl6.png',];