【发布时间】：2021-10-10 12:04:09
【问题描述】：
我的 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 个按钮与这个按钮的作用相同，只是日期时间值不同。
【问题讨论】：
标签： flutter api dart listview flutter-listview