我正在尝试构建一个包含要加载的预订列表的应用。当用户滚动浏览这些预订时,滚动非常不稳定。我已经在所有调试,配置文件和发布模式下进行了测试,但仍然存在滚动不稳定的问题。 iOS和Android均是如此。这是我已经尝试过的-
即使在概要文件模式下,ListView构建器也要花费16ms以上的时间来构建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, ), ), ), ), ), ), ); }, );
我正在尝试构建一个包含要加载的预订列表的应用。当用户滚动浏览这些预订时,滚动非常不稳定。我已经在所有调试,配置文件和发行版上进行了测试...
在配置文件模式下运行能够找出我生成虚线的问题使用列表生成器而不是使用contianer,这是造成延迟的原因替换了以下代码