我正在尝试构建一个应用程序，其中包含加载的预订列表。当用户滚动浏览这些预订时，滚动非常不稳定。我已经完成了所有调试、配置文件和发布模式的测试，但滚动不连贯的问题仍然存在。iOS 和 Android 都是如此。这是我已经尝试过的-
- 我已经尝试过使用 const AlwaysScrollableScrollPhysics()，
- 我尝试过不使用动画和使用动画。在这两种情况下都存在不连贯的滚动
- 我试过cached.network.image。断断续续的滚动存在。
即使在配置文件模式下，ListView 构建器也需要超过 16 毫秒来构建 ListTile
return ListView.builder(
physics: const AlwaysScrollableScrollPhysics(),
itemCount: widget.bookings.length,
scrollDirection: Axis.vertical,
itemBuilder: (context, int index) {
var count = 10;
var animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: animationController,
curve: Interval((1 / count) * index, 1.0,
curve: Curves.fastOutSlowIn)));
animationController.forward();
return BookingListCard(
booking: widget.bookings[index],
bookings: widget.bookings,
animation: animation,
animationController: animationController,
);
},
);
AnimatedBuilder(
animation: animationController,
builder: (BuildContext context, Widget child) {
return FadeTransition(
opacity: animation,
child: new Transform(
transform: new Matrix4.translationValues(
0.0, 50 * (1.0 - animation.value), 0.0),
child: Padding(
padding:
const EdgeInsets.only(left: 0, right: 0, top: 0, bottom: 0),
child: InkWell(
splashColor: Colors.transparent,
onTap: () {
callback();
},
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Card(
color: AppTheme.halfWhite,
elevation: 0,
child: ListTile(
onTap: () {
Navigator.of(context)
.push(_createRoute(booking, booking.id));
},
leading: Container(
width: _size,
height: _size,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(booking.guest.imageUrl),
fit: BoxFit.fill,
),
),
),
title: Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Text(
booking.guest.firstName,
style: AppTheme.title,
),
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text(
'${(DateFormat("E, d MMM").format(DateTime.parse(booking.checkIn))).toUpperCase()} ',
style: AppTheme.caption,
),
Image.asset(
"assets/images/arrow.png",
width: 12,
height: 12,
),
Text(
' ${(DateFormat("E, d MMM").format(DateTime.parse(booking.checkOut))).toUpperCase()}',
style: AppTheme.caption,
)
],
),
Padding(
padding:
const EdgeInsets.only(top: 8.0, bottom: 8.0),
child: DashedDivider(
color: Colors.black.withOpacity(0.6),
dashWidth: 0.1),
),
Text(
'${(booking.status).toUpperCase()}',
style: TextStyle(
color: statusColorFinder(booking.status),
fontFamily: AppTheme.fontName,
fontWeight: FontWeight.bold,
fontSize: 12,
letterSpacing: 0.4,
height: 0.9,
),
),
],
),
// trailing: Icon(Icons.more_vert),
trailing: booking.status == 'Pending' ? MyBullet() : null,
isThreeLine: false,
),
),
),
),
),
),
);
},
);