如何刷新按钮上的列表小部件数据，单击FLUTTER

Question

我的flutter应用程序显示空间预订，数据来自rest api。

屏幕有垂直和水平的列表视图。

水平列表视图包含14个按钮，用户可以决定他想要在垂直列表视图上显示哪天的预订。我遇到的问题是，我不能刷新垂直列表视图状态与按钮点击，以显示正确的日期。

我现在在这里:

垂直列表视图:

Widget bookingListView(List data, BuildContext context) {
if (data.isNotEmpty) {
return Container(
key: UniqueKey(),
child: Scrollbar(
showTrackOnHover: true,
isAlwaysShown: true,
controller: _horizontalScrollController,
radius: Radius.circular(32),
thickness: 5.0,
child: SingleChildScrollView(
child: ListView.builder(
scrollDirection: Axis.vertical,
controller: _horizontalScrollController,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
padding: EdgeInsets.only(left: 8.0, right: 6.0),
itemCount: data.length,
itemBuilder: (context, int index) {
Bookings booking = data[index];
String fromDate = booking.from;
String toDate = booking.to;
DateFormat inputFormat = DateFormat('yyyy/MM/dd HH:mm:ss Z');
DateTime fromD = inputFormat.parse(fromDate)
.toUtc()
.add(new Duration(hours: 2));
DateTime toD = inputFormat.parse(toDate).toUtc().add(
new Duration(hours: 2));
final frmDt = fromD.toLocal();
final toDt = toD.toLocal();
String from = DateFormat('HH:mm').format(frmDt);
String to = DateFormat('HH:mm').format(toDt);
return Column(
children: [
Padding(
padding: const EdgeInsets.only(left: 22),
child: ListTile(
title: Row(children: [
Text(
"$from",
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 48.0,
color: Color(0xfff2f2f2)),
),
Padding(
padding: const EdgeInsets.only(
left: 6.0, right: 6.0),
child: Text(
"-",
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 48.0,
color: Color(0xfff2f2f2)),
),
),
Text(
"$to",
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 48.0,
color: Color(0xfff2f2f2)),
),
]),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment
.start,
children: [
Padding(
padding: const EdgeInsets.only(
top: 6.0),
child: Text(
booking.membership.name == null
? ""
: booking.membership.name,
style: TextStyle(
fontSize: booking.membership.name == null
? 0
: 40.0,
fontWeight: FontWeight.w300,
color: Color(0xfff2f2f2)),
),
),
Padding(
padding: const EdgeInsets.only(
top: 6.0),
child: Text(
booking.title == null
? ""
: booking.title ,
style: TextStyle(
fontSize:
booking.title  == null
? 0
: 40.0,
fontWeight: FontWeight.w300,
color: Color(0xfff2f2f2)),
),
),
],
),
),
),
Divider(
color: Colors.white,
indent: 10.0,
endIndent: 10.0,
thickness: 0.2,
)
],
);
}),
),
),
);
} else if (data.isEmpty) {
return Container(
child: Center(
heightFactor: 7,
child: Text(
"noBooking".tr().toString(),
style: TextStyle(
fontSize: 46.0,
fontWeight: FontWeight.w300,
color: Colors.white),
),
),
);
}
return Center(child: CircularProgressIndicator());
}

和水平列表视图:

Padding(
padding: const EdgeInsets.all(8.0),
child: FittedBox(
fit: BoxFit.fitHeight,
child: OutlinedButton(
onPressed: () async {
var from =
"${formatFrom.format(DateTime.now())}";
var to =
"${formatTo.format(DateTime.now())} 23:59";
String fromDate = from.toString();
String toDate = to.toString();
final SharedPreferences
sharedPreferences =
await SharedPreferences.getInstance();
sharedPreferences.setString(
"from", fromDate);
sharedPreferences.setString("to", toDate);
setState(() {
selectedIndex = 0;
var format = new DateFormat('MM/dd');
formattedDate =
format.format(DateTime.now());
print(selectedIndex);
Network.getBookings();
});
},
style: OutlinedButton.styleFrom(
padding: EdgeInsets.fromLTRB(
26.0, 20.0, 26.0, 20.0),
backgroundColor: selectedIndex == 0
? Color(0xfff78848)
: Color(0x66404142),
side: BorderSide(color: Colors.white)),
child: FittedBox(
fit: BoxFit.fitHeight,
child: Text(dayOne.toString(),
style: TextStyle(
color: Colors.white,
fontSize: 22.0)),
),
),
),
),

剩下的13个按钮与这个相同，只是使用不同的from和to datetime值。

Answer 1

当你在列表中添加新项目时你必须在本地将项目添加到列表中，如list.add(newItem)然后你必须调用setState()它将重建列表并在屏幕上呈现新项目

另一个解决方案:如果你想刷新整个页面，那么你可以清除之前的列表并切换你的加载变量，然后调用你的getDate()来获取新添加的数据。

Answer 2

插入数据到列表将被刷新。

setState(() {
list.add(newItem); // or list.insert() can be used.
});

否则，可将按钮的onTap:/onPressed:与setState(() {})结合使用。

:

InkWell(
onTap: () => setState(() {}),
child: // widget what you want
),