Flutter 颤振性能问题:类似Instagram的时间线,自动播放视频

Flutter 颤振性能问题:类似Instagram的时间线,自动播放视频,flutter,flutter-layout,Flutter,Flutter Layout,我想要一个像Instagram一样的带有视频的时间线。视频应在可见区域内开始播放。我使用VisibilityDetector,这是我想要的。 但我最大的问题是:性能非常差。滚动是非常困难的,而且视频很不稳定。 有人知道如何提高绩效吗 我的代码: SingleChildScrollView(child: Column( children: [ QuickSearch(this), FutureBuilder( future: arti

我想要一个像Instagram一样的带有视频的时间线。视频应在可见区域内开始播放。我使用VisibilityDetector,这是我想要的。 但我最大的问题是:性能非常差。滚动是非常困难的,而且视频很不稳定。 有人知道如何提高绩效吗

我的代码:

SingleChildScrollView(child: Column(
      children: [
        QuickSearch(this),
        FutureBuilder(
          future: articles,
          builder: (context, AsyncSnapshot snapshot) {
            if (snapshot.connectionState != ConnectionState.done ||
                snapshot.data == null) {
              return Center(
                  child: CircularProgressIndicator(
                      backgroundColor: colorSecondary));
            } else {
              if (snapshot.data.isNotEmpty) {
                List articles = snapshot.data['articles'];
                return ListView.builder(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    itemCount: articles.length,
                    itemBuilder: (BuildContext ctxt, int index) {
                         var article = articles[index];
                      return VisibilityDetector(
                key: Key('article_' + article.id.toString()),
                onVisibilityChanged: (visibilityInfo) {
                  var visiblePercentage = visibilityInfo.visibleFraction * 100;
                  if (visiblePercentage > 50) {
                   
                    if (_videoPlayerController != null) {
                      if (videoPlays == false) {
                        _videoPlayerController.play();
                        videoPlays = true;
                      }
                    }
                  } else {
                    if (_videoPlayerController != null) {
                      if (videoPlays == true) {
                        _videoPlayerController.pause();
                        videoPlays = false;
                      }
                    }
                  }
                },
                child: Container(
    height: size.height / 1.8,
    child: Stack(
      clipBehavior: Clip.hardEdge,
      children: [
        PinchZoom(
          zoomedBackgroundColor: Colors.black.withOpacity(0.5),
          resetDuration: const Duration(milliseconds: 400),
          maxScale: 2.5,
          image: ClipRect(
              child: new OverflowBox(
                  maxWidth: double.infinity,
                  maxHeight: double.infinity,
                  alignment: Alignment.center,
                  child: new FittedBox(
                      fit: BoxFit.cover,
                      alignment: Alignment.center,
                      child: new Container(
                          width: size.width,
                          height: size.height,
                          child:
                              new VideoPlayer(_videoPlayerController))))),
        ),
        Positioned(
            left: 10,
            top: 10,
            child: ...
              ),
            )),
      ],
    ))))