flutter - 只有在点击其他元素时，UI更改才会生效
问题内容：
我在屏幕下方，该屏幕显示了用户点previous/last和current月份的历史记录。将point有2个指标，它们是Text1和Text2。
我的屏幕如何工作：
- 默认数据将显示current月份。
- 如果我点击last month按钮，它将更改UI以显示上个月的数据。
- 如果我点击Show/Hide Text 1，首先它将隐藏的所有外观Text1。如果我再次轻按，则所有内容Text1都会再次出现。
- 对于Show/Hide Text2相同点（3）。
问题 ：
如果我点击show/hide按钮Text1或Text2 ，则只有在我点击last month或current month按钮（显示/隐藏Text1或Text2的元素）后才会生效。所以show/hide按钮的更改效果不是立即发生的，我需要点击另一个元素才能生效。
The Code :
MainHistoryScreen.dart :
class MainHistoryScreen extends StatefulWidget {
@override
_MainHistoryScreenState createState() {
return new _MainHistoryScreenState();
}
}
class _MainHistoryScreenState extends State<MainHistoryScreen> {
MainHistoryBloc MainHistoryBloc;
int selectedValue = 1;
//you don't have to declare false as bool is initialised false by default
bool showText1 = false;
bool showText2 = false;
bool showText3 = false;
@override
void initState() {
super.initState();
MainHistoryBloc = MainHistoryBloc();
MainHistoryBloc.getContents(context);
}
@override
void dispose() {
super.dispose();
MainHistoryBloc.dispose();
}
getNumberFormat(String str) {
final f = new NumberFormat("#.###");
return str.replaceAll(f.symbols.GROUP_SEP, '');
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Pigment.fromString(UIData.primaryColor),
elevation: 0,
centerTitle: true,
title: Text(translations.text("main_history").toUpperCase()),
leading: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: InkWell(
child: SizedBox(child: Image.asset("assets/images/arrow-back.png"), height: 10, width: 1,),
onTap: () => Navigator.of(context).pop(),
)
),
],
),
),
body: ListView(
primary: true,
scrollDirection: Axis.vertical,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.30,
padding: EdgeInsets.all(16.0),
width: MediaQuery.of(context).size.width,
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/images/account/background.png"),
fit: BoxFit.cover,
),
),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
child: CircleAvatar(
backgroundImage: NetworkImage(UIData.defaultUserIconUrl),
),
height: 75,
width: 75,
),
SizedBox(height: 20,),
StreamBuilder(
stream: MainHistoryBloc.userStream,
builder: (BuildContext ctx,AsyncSnapshot<User> snapshot){
if(!snapshot.hasData) {
return Text(translations.text("member_since") + ": -", style: TextStyle(color: Colors.white));
}
return Text(translations.text("member_since") + ": " + new DateFormat("d MMMM y").format(DateTime.parse(snapshot.data.created_at.toString())), style: TextStyle(color: Colors.white));
}
)
]
),
),
),
Padding(
padding: EdgeInsets.all(8),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Divider(height: 2, color: Pigment.fromString(UIData.primaryColor),),
SizedBox(height: 10,),
StreamBuilder(
stream: MainHistoryBloc.totalmainHistoryStream,
builder: (BuildContext ctx, AsyncSnapshot<UserDetail> snapshot){
var point = snapshot.hasData ? this.getNumberFormat(snapshot.data.point.toString()) : "0";
var main = snapshot.hasData ? this.getNumberFormat(snapshot.data.main.toString()) : "0";
var sadaqah = snapshot.hasData ? this.getNumberFormat(snapshot.data.sadaqah.toString()) : "0";
return Container(
child: Row(
children: <Widget>[
Expanded(
child: mainMenuWidget(
image: "assets/images/main/star.png",
title: translations.text("total_points"),
subtitle: point,
onTap: () {
//Show/Hide Text1
showText1 = !showText1;
print ("Text 1 = "+showText1.toString());
}
)
),
Expanded(
child: mainMenuWidget(
image: "assets/images/home/my-main.png",
title: translations.text("total_main"),
subtitle: main,
onTap: () {
//Show/Hide Text2
showText2 = !showText2;
}
)
),
Expanded(
child: mainMenuWidget(
image: "assets/images/home/more-sadaqah.png",
title: translations.text("total_sadaqah"),
subtitle: sadaqah,
onTap: () {
//Show/Hide Text 3
showText3 = !showText3;
},
)
)
],
)
);
}
),
SizedBox(height: 10,),
Divider(height: 2, color: Pigment.fromString(UIData.primaryColor),),
Padding(
padding: EdgeInsets.only(left: 26, top: 12, bottom: 12),
child: Text(translations.text("histories"), textAlign: TextAlign.left, style: TextStyle(fontSize: 16),),
),
Divider(height: 2, color: Pigment.fromString(UIData.primaryColor),),
SizedBox(
width: 1000,
child: Padding(
padding: EdgeInsets.all(8),
child: StreamBuilder(
stream: MainHistoryBloc.tabSelectedValueStream,
builder: (context, snapshot) {
return CupertinoSegmentedControl<int>(
selectedColor: Pigment.fromString(UIData.primaryColor),
borderColor: Pigment.fromString(UIData.primaryColor),
children: <int, Widget>{
0: Text(translations.text("last_month").toString()),
1: Text(translations.text("this_month").toString()),
},
onValueChanged: (int newValue) {
MainHistoryBloc.onChangeTab(newValue);
},
groupValue: snapshot.data,
);
}
),
)
),
],
)
),
historiesWidget(),
],
)
);
}
Widget historiesWidget() {
return StreamBuilder(
stream: MainHistoryBloc.mainHistoriesStream,
builder: (BuildContext ctx, AsyncSnapshot<List<mainHistory>> snapshot) {
if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
if (!snapshot.hasData) return Center(child: ActivityIndicatorWidget());
if (snapshot.data.length <= 0) return Center(child: Text(translations.text("empty_data")));
return ListView.builder(
shrinkWrap: true,
itemCount: snapshot.data.length,
primary: false,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (ctx, i) {
return ActivityHistoryCardWidget(mainHistory: snapshot.data[i],
showText1: showText1,
showText2: showText2,
showText3: showText3,
);
}
);
}
);
}
}
Below are list card widget to show the data.
ActivityHistoryWidget.dart :
class ActivitHistoryCardWidget extends StatefulWidget {
DActivitHistory dActivitHistory;
bool showText1;
bool showText2;
bool showText3;
ActivitHistoryCardWidget({this.dActivitHistory, this.showText1, this.showText2, this.showText3});
@override
_ActivitHistoryCardWidget createState() {
return new _ActivitHistoryCardWidget(dActivitHistory: dActivitHistory);
}
}
class _ActivitHistoryCardWidget extends State<ActivitHistoryCardWidget> {
DActivitHistory dActivitHistory;
bool showText1;
bool showText2;
bool showText3;
_ActivitHistoryCardWidget({this.dActivitHistory, this.showText1, this.showText2, this.showText3});
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 100,
alignment: Alignment.topCenter,
child: Text(new DateFormat("d").format(DateTime.parse(dActivitHistory.dActivitDate)),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 50,
)
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 10,),
Text(new DateFormat("EEEE").format(DateTime.parse(dActivitHistory.dActivitDate)),
style: TextStyle(
fontSize: 14
),
),
SizedBox(height: 5,),
Text(new DateFormat("MMMM y").format(DateTime.parse(dActivitHistory.dActivitDate)),
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600
),
),
//Point Widget
widget.showText1 ? Container() : this.PointHistory(context),
//Activit Widget
widget.showText2 ? Container() : this.ActivitHistory(context),
//Give Widget
widget.showText3 ? Container() : this.GiveHistory(context),
SizedBox(height: 10,),
],
)
],
),
),
Divider(height: 2, color: Pigment.fromString(UIData.primaryColor),),
],
);
}
Widget PointHistory(context) {
return Column(
children: <Widget>[
SizedBox(height: 10,),
Row(
children: <Widget>[
SizedBox(child: Image.asset("assets/images/Activit/star.png"),height: 20, width: 20,),
SizedBox(width: 10,),
Text(getNumberFormat(dActivitHistory.counter.toString()),
style: TextStyle(
fontSize: 16,
color: Pigment.fromString(UIData.primaryColor)
),
),
],
),
],
);
}
Widget ActivitHistory(context) {
return Column(
children: <Widget>[
SizedBox(height: 10,),
Row(
children: <Widget>[
SizedBox(child: Image.asset("assets/images/home/my-Activit.png"),height: 20, width: 20,),
SizedBox(width: 10,),
Text(getNumberFormat(dActivitHistory.dActivitTotal.toString()),
style: TextStyle(
fontSize: 16,
color: Pigment.fromString(UIData.primaryColor)
),
),
],
),
],
);
}
Widget GiveHistory(context) {
return Column(
children: <Widget>[
SizedBox(height: 10,),
Row(
children: <Widget>[
SizedBox(child: Image.asset("assets/images/home/more-Give.png"),height: 20, width: 20,),
SizedBox(width: 10,),
Text('Di Salurkan Sejumlah Rp '+getNumberFormat(dActivitHistory.GiveTotal.toString()+' ke Lembaga '+getFoundationName(dActivitHistory.foundationDonateId.toString()) ),
style: TextStyle(
fontSize: 16,
color: Pigment.fromString(UIData.primaryColor)
),
),
],
),
],
);
}
getFoundationName(String str)
{
String returnName = '';
switch (str) {
case '1':
returnName = 'A';
break;
case '2':
returnName = 'B';
break;
case '3':
returnName = 'C';
break;
case '4':
returnName = 'D';
break;
case '5':
returnName = 'E';
break;
}
return returnName;
}
getNumberFormat(String str) {
final f = new NumberFormat("#.###");
return str.replaceAll(f.symbols.GROUP_SEP, '');
}
}
Any Idea ?
Thanks In Advance…
问题答案：
您需要使用setState()方法来更改状态。例如：
Expanded(
child: mainMenuWidget(
image: "assets/images/home/more-sadaqah.png",
title: translations.text("total_sadaqah"),
subtitle: sadaqah,
onTap: () {
setState(() {
showText3 = true;
});
},
)
)
当您已经在使用条件状态进行更改时，它将更新ui。
//Give Widget
widget.showText3 ? Container() : this.GiveHistory(context),
但这仅在您更改一个类的状态时有效。我看到您有2个单独的班级，您需要更多高级状态管理。因此，您可以维护
其他类的状态。尝试使用provider.
