英文:
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 > 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];
},
),
)
],
),
),
),
);
}
}
答案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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论