android - 颤动 - UI 更改仅在点击另一个元素时生效
问题描述
我有下面的屏幕,这个屏幕显示用户点previous/last
和current
月份的历史记录。有point
2 个指标,它们是Text1
和Text2
。
我的屏幕如何工作:
- 默认数据将显示
current
月份。 - 如果我点击
last month
按钮,它将更改 UI 以显示上个月的数据。 - 如果我点击
Show/Hide Text 1
,首先它将隐藏所有外观Text1
。如果我再次点击,那么所有Text1
将再次出现。 - 与第 (3)点
Show/Hide Text2
相同。
问题 :
如果我点击show/hide
按钮,Text1
或者只有在我点击或按钮Text2
后才会生效last month
current month
(显示/隐藏 Text1 或 Text2 的元素)。所以按钮的改变效果show/hide
不是立即的,我需要点击另一个元素才能生效。
编码 :
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,
);
}
);
}
);
}
}
下面是显示数据的列表卡小部件。
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, '');
}
}
任何想法 ?
提前致谢...
解决方案
您需要使用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 个单独的班级,你需要更高级的状态管理。所以你可以维护不同类的状态。尝试使用提供者。
推荐阅读
- css - 如何使用overflow-x在表格上显示滚动条:iOS上的自动
- python - Django 导入错误:无法导入“名称”
- python - 获取位大小 N 的所有可能的位组合
- flutter - Beacon functionality in Flutter
- .net-core - OpenCover 未在 Azure Devops 中上传
- c - 使用 strtok 后函数未运行
- google-chrome-extension - 如何设置 Chrome Webstore 上显示的 220x140 主图像以进行扩展
- c - 从C中的字符串修剪前导和尾随空格
- json - 如何在不溢出堆栈的情况下将 XML 文件转换为 JSON?
- arrays - 在数组中查找最大值