Flutter 在移动设备上滚动时出现卡顿。

huangapple go评论71阅读模式
英文:

Flutter web lagging on mobile when i scroll

问题

I am making my first website on flutter. I used Listview.builder on all pages. On pc it is working perfectly. But in mobile it is unusably lagging and stuttering when I scroll.

我正在使用Flutter制作我的第一个网站。我在所有页面上使用了Listview.builder。在电脑上它运行得很完美,但在移动设备上滚动时出现了无法使用的卡顿和延迟。

I tried primary: false but it is not working. I need help.

我尝试了primary: false,但它没有起作用。我需要帮助。

Here is my homepage for example (it is lagging for all screens);

这是我的首页示例(在所有屏幕上都有卡顿);

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    Size size = MediaQuery.of(context).size;
    bool isDeviceDesktop = (size.width > 1000);

    List<Widget> items = [
                  const MyCarouselSlider(),
                  const SizedBox(height: 50,),
                  AnimatedTextKit(
                    animatedTexts: [
                      TypewriterAnimatedText(
                        'Nayıs Perde , Evinize Şıklık Katar...',
                        textStyle: GoogleFonts.dancingScript(fontSize: 35, color: Colors.white),
                        textAlign: TextAlign.center,
                        speed: const Duration(milliseconds: 60),
                      )
                    ],
                    totalRepeatCount: 1,
                  ),
                  const SizedBox(height: 70,),
                  isDeviceDesktop?const BuildWhysColumnForDesktop():const BuildWhysColumnForMobile(),
                  const SizedBox(height: 70,),
                  isDeviceDesktop?const BuildFeaturingProductsColumnForDesktop():const BuildFeaturingProductsColumnForMobile(),
                  const SizedBox(height: 70,),
                  UnconstrainedBox(child: Dividers.simpleDivider(mediaSize: size)),
                  isDeviceDesktop?EndingContainerForDesktop(size: size):EndingContainerForMobile(size: size),


                ];

    return Scaffold(
      floatingActionButton: isDeviceDesktop?null:const DoubleFabRow(),
      drawer: const NavDrawer(),
      body: CustomPerformanceOverlay(
        child: Container(
          height: size.height,
          width: size.width,
          decoration: const BoxDecoration(image: DecorationImage(image: AssetImage('assets/model/background.jpg',),fit: BoxFit.cover)),
          child: Column(
            children: [
              const CustomAppBar(),
              Expanded(
                child: ListView.builder(
                  primary: false,
                  padding: EdgeInsets.zero,
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                  itemCount: items.length,
                  itemBuilder: (context, index) {
                    return items[index];
                  },
                ),
              )


            ],
          ),
        ),
      ),
    );
  }
}

这是我的首页示例(在所有屏幕上都有卡顿);

英文:

I am making my first website on flutter. I used Listview.builder on all pages. On pc it is working perfectly.But in mobile it is unusably lagging and stuttering when i scroll.

I tried primary : false but it is not working. I need help.

Here is my homepage for example (it is lagging for all screens) ;

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    Size size = MediaQuery.of(context).size;
    bool isDeviceDesktop = (size.width &gt; 1000);

    List&lt;Widget&gt; items = [
                  const MyCarouselSlider(),
                  const SizedBox(height: 50,),
                  AnimatedTextKit(
                    animatedTexts: [
                      TypewriterAnimatedText(
                        &#39;Nayıs Perde , Evinize Şıklık Katar...&#39;,
                        textStyle: GoogleFonts.dancingScript(fontSize: 35, color: Colors.white),
                        textAlign: TextAlign.center,
                        speed: const Duration(milliseconds: 60),
                      )
                    ],
                    totalRepeatCount: 1,
                  ),
                  const SizedBox(height: 70,),
                  isDeviceDesktop?const BuildWhysColumnForDesktop():const BuildWhysColumnForMobile(),
                  const SizedBox(height: 70,),
                  isDeviceDesktop?const BuildFeaturingProductsColumnForDesktop():const BuildFeaturingProductsColumnForMobile(),
                  const SizedBox(height: 70,),
                  UnconstrainedBox(child: Dividers.simpleDivider(mediaSize: size)),
                  isDeviceDesktop?EndingContainerForDesktop(size: size):EndingContainerForMobile(size: size),
                  

                ];
    
    return Scaffold(
      floatingActionButton: isDeviceDesktop?null:const DoubleFabRow(),
      drawer: const NavDrawer(),
      body: CustomPerformanceOverlay(
        child: Container(
          height: size.height,
          width: size.width,
          decoration: const BoxDecoration(image: DecorationImage(image: AssetImage(&#39;assets/model/background.jpg&#39;,),fit: BoxFit.cover)),
          child: Column(
            children: [
              const CustomAppBar(),
              Expanded(
                child: ListView.builder(
                  primary: false,
                  padding: EdgeInsets.zero,
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                  itemCount: items.length,
                  itemBuilder: (context, index) {
                    return items[index];
                  },
                ),
              )
      
      
            ],
          ),
        ),
      ),
    );
  }
}

答案1

得分: 2

使用canvaskit构建解决了这个问题。如果你遇到相同问题,在终端中需要输入flutter build web --web-renderer canvaskit来构建web文件夹。

英文:

Building with canvaskit fixed the issue. If you have the same issue, in terminal you need to type flutter build web --web-renderer canvaskit when building the web folder.

huangapple
  • 本文由 发表于 2023年5月18日 01:26:34
  • 转载请务必保留本文链接:https://go.coder-hub.com/76274719.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定