Flutter / Dart - 从浮动操作按钮调用 SetState 的问题
Flutter / Dart - Problem with SetState called from a Floating Action Button
我在按下 FAB 时无法调用 SetState。屏幕上没有任何变化...
代码如下:
bool _editMode = false;
return DefaultTabController(
length: 3,
child: Scaffold(
backgroundColor: Colors.orange[100],
appBar: AppBar(
backgroundColor: Colors.white,
automaticallyImplyLeading: false,
title: Center(
child: Text(
'Liste de vocabulaire n°${userData.selectedCarnetList + 1}'
.toUpperCase(),
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.blue[800],
),
maxLines: 2,
textAlign: TextAlign.center,
),
),
actions: [
GestureDetector(
child: Container(
padding: EdgeInsets.all(16.0),
child: listsProvider.dicoLanguage == Language.french
? Image.asset(
'icons/french_flag.png',
height: 45.0,
width: 45.0,
)
: Image.asset(
'icons/english_flag.png',
height: 45.0,
width: 45.0,
),
),
onTap: () => listsProvider.dicoLanguage == Language.french
? listsProvider.setDicoLanguage(Language.english)
: listsProvider.setDicoLanguage(Language.french),
),
],
bottom: TabBar(
indicatorWeight: 10,
indicatorColor: Colors.green[800],
tabs: [
Tab(
child: Text(
'Ordre alphabétique',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.red[800]),
),
),
Tab(
child: Text(
'Catégorie grammaticale',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.red[800]),
),
),
Tab(
child: Text(
'Niveau',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.red[800]),
),
),
]),
),
body: TabBarView(
children: [
ListView(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: CarnetListCard(
index: index,
taille:
userData.userInfo.carnetVoc[index].wordId.length,
titre: userData.userInfo
.carnetVoc[userData.selectedCarnetList].titre
.toUpperCase(),
dateCreation:
userData.userInfo.carnetVoc[index].creation,
dateModification:
userData.userInfo.carnetVoc[index].modification,
mots: ListView.builder(
itemCount: userData
.userInfo.carnetVoc[index].wordId.length,
itemBuilder: (context, index2) {
return ListTile(
contentPadding: EdgeInsets.all(0),
title: Container(
decoration: BoxDecoration(
color: Colors.red[800],
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Text(
listsProvider.dicoLanguage ==
Language.english
? wordBank[userData
.userInfo
.carnetVoc[index]
.wordId[index2]]
.main
: wordBank[userData
.userInfo
.carnetVoc[index]
.wordId[index2]]
.mainFr,
style: TextStyle(
color: Colors.white,
fontSize: 13.0,
),
),
),
Expanded(
child: Text(
listsProvider.dicoLanguage ==
Language.english
? wordBank[userData
.userInfo
.carnetVoc[index]
.wordId[index2]]
.mainFr
: wordBank[userData
.userInfo
.carnetVoc[index]
.wordId[index2]]
.main,
style: TextStyle(
color: Colors.orange[100],
fontSize: 13.0),
),
),
],
),
),
),
onTap: () => Navigator.push(context,
MaterialPageRoute(builder: (context) {
return DisplayThematicList(
subTheme: listsProvider
.themeBank[index].subTheme[index2],
langue: listsProvider.dicoLanguage,
image: listsProvider.themeBank[index].thema,
);
})),
);
},
),
),
),
],
),
ListView(),
ListView(),
],
),
floatingActionButton: _editMode == false
? Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: FloatingActionButton(
heroTag: 'Back',
backgroundColor: Colors.red[800],
child: Icon(Icons.arrow_back),
onPressed: () => Navigator.pushReplacementNamed(
context, CarnetScreen.id),
),
),
FloatingActionButton.extended(
heroTag: 'Edit',
backgroundColor: Colors.blue[800],
icon: Icon(Icons.edit),
label: Text('Modifier'),
onPressed: () {
setState(() {
_editMode = true;
print(_editMode);
});
})
],
)
: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: FloatingActionButton(
heroTag: 'Close',
backgroundColor: Colors.red[800],
child: Icon(Icons.close),
onPressed: () => Navigator.pushReplacementNamed(
context, CarnetScreen.id),
),
),
FloatingActionButton.extended(
heroTag: 'Valider',
backgroundColor: Colors.green[800],
icon: Icon(Icons.library_add_check_rounded),
label: Text('Valider'),
onPressed: () {
setState(() {
_editMode = false;
print(_editMode);
});
}),
],
),
),
);
}
}
当点击 FAB ('EDIT') 时,我将 (_editMode) 设置为 TRUE,它应该重建并显示新按钮...但由于某种原因没有任何反应...
FAB 中是否有任何东西可以将操作与屏幕状态分开?还是 TAB BAR 造成的?
知道为什么吗?
将变量 bool _editMode = false;
放在构建方法上方
bool _editMode = false;
@override
Widget build(BuildContext context) {
我在按下 FAB 时无法调用 SetState。屏幕上没有任何变化...
代码如下:
bool _editMode = false;
return DefaultTabController(
length: 3,
child: Scaffold(
backgroundColor: Colors.orange[100],
appBar: AppBar(
backgroundColor: Colors.white,
automaticallyImplyLeading: false,
title: Center(
child: Text(
'Liste de vocabulaire n°${userData.selectedCarnetList + 1}'
.toUpperCase(),
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.blue[800],
),
maxLines: 2,
textAlign: TextAlign.center,
),
),
actions: [
GestureDetector(
child: Container(
padding: EdgeInsets.all(16.0),
child: listsProvider.dicoLanguage == Language.french
? Image.asset(
'icons/french_flag.png',
height: 45.0,
width: 45.0,
)
: Image.asset(
'icons/english_flag.png',
height: 45.0,
width: 45.0,
),
),
onTap: () => listsProvider.dicoLanguage == Language.french
? listsProvider.setDicoLanguage(Language.english)
: listsProvider.setDicoLanguage(Language.french),
),
],
bottom: TabBar(
indicatorWeight: 10,
indicatorColor: Colors.green[800],
tabs: [
Tab(
child: Text(
'Ordre alphabétique',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.red[800]),
),
),
Tab(
child: Text(
'Catégorie grammaticale',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.red[800]),
),
),
Tab(
child: Text(
'Niveau',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.red[800]),
),
),
]),
),
body: TabBarView(
children: [
ListView(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: CarnetListCard(
index: index,
taille:
userData.userInfo.carnetVoc[index].wordId.length,
titre: userData.userInfo
.carnetVoc[userData.selectedCarnetList].titre
.toUpperCase(),
dateCreation:
userData.userInfo.carnetVoc[index].creation,
dateModification:
userData.userInfo.carnetVoc[index].modification,
mots: ListView.builder(
itemCount: userData
.userInfo.carnetVoc[index].wordId.length,
itemBuilder: (context, index2) {
return ListTile(
contentPadding: EdgeInsets.all(0),
title: Container(
decoration: BoxDecoration(
color: Colors.red[800],
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Text(
listsProvider.dicoLanguage ==
Language.english
? wordBank[userData
.userInfo
.carnetVoc[index]
.wordId[index2]]
.main
: wordBank[userData
.userInfo
.carnetVoc[index]
.wordId[index2]]
.mainFr,
style: TextStyle(
color: Colors.white,
fontSize: 13.0,
),
),
),
Expanded(
child: Text(
listsProvider.dicoLanguage ==
Language.english
? wordBank[userData
.userInfo
.carnetVoc[index]
.wordId[index2]]
.mainFr
: wordBank[userData
.userInfo
.carnetVoc[index]
.wordId[index2]]
.main,
style: TextStyle(
color: Colors.orange[100],
fontSize: 13.0),
),
),
],
),
),
),
onTap: () => Navigator.push(context,
MaterialPageRoute(builder: (context) {
return DisplayThematicList(
subTheme: listsProvider
.themeBank[index].subTheme[index2],
langue: listsProvider.dicoLanguage,
image: listsProvider.themeBank[index].thema,
);
})),
);
},
),
),
),
],
),
ListView(),
ListView(),
],
),
floatingActionButton: _editMode == false
? Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: FloatingActionButton(
heroTag: 'Back',
backgroundColor: Colors.red[800],
child: Icon(Icons.arrow_back),
onPressed: () => Navigator.pushReplacementNamed(
context, CarnetScreen.id),
),
),
FloatingActionButton.extended(
heroTag: 'Edit',
backgroundColor: Colors.blue[800],
icon: Icon(Icons.edit),
label: Text('Modifier'),
onPressed: () {
setState(() {
_editMode = true;
print(_editMode);
});
})
],
)
: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: FloatingActionButton(
heroTag: 'Close',
backgroundColor: Colors.red[800],
child: Icon(Icons.close),
onPressed: () => Navigator.pushReplacementNamed(
context, CarnetScreen.id),
),
),
FloatingActionButton.extended(
heroTag: 'Valider',
backgroundColor: Colors.green[800],
icon: Icon(Icons.library_add_check_rounded),
label: Text('Valider'),
onPressed: () {
setState(() {
_editMode = false;
print(_editMode);
});
}),
],
),
),
);
}
}
当点击 FAB ('EDIT') 时,我将 (_editMode) 设置为 TRUE,它应该重建并显示新按钮...但由于某种原因没有任何反应...
FAB 中是否有任何东西可以将操作与屏幕状态分开?还是 TAB BAR 造成的?
知道为什么吗?
将变量 bool _editMode = false;
放在构建方法上方
bool _editMode = false;
@override
Widget build(BuildContext context) {