flutter 简单抖动列表视图不连续滚动

yyhrrdl8  于 2023-11-21  发布在  Flutter
关注(0)|答案(3)|浏览(155)

我一直在评估Flutter在应用程序中的使用,并从一个非常简单的文本列表示例开始。在构建第一个视图后,我注意到列表视图有起伏滚动,所以我仔细查看了展示应用程序,结果发现虽然Reflectly是一个漂亮的应用程序,它也遇到了同样的问题--滚动时非常不稳定,只有一个简单的文本列表。到目前为止,我已经在iOS模拟器、iPhone XR、三星Galaxy Android设备和Android Pixel 2 XL模拟器上证实了这一点。
我没有看到围绕这一点的讨论,所以我想知道我是否做错了什么,但也怀疑我是多么简单,我的例子是多么简单,反射有同样的问题。
我想从社区中了解的是:1.我做了什么明显错误/愚蠢的事情导致了这一点2.如果你在你的设备上运行,你看到了我看到的吗?3.这是已知的,将被处理?如果我致力于Flutter,我能感到舒适,我的列表将在不久的将来顺利滚动吗?
下面是你可以运行的代码来重现这一点(对不起,它有点做作,但我想玩各种Flutter/Dart功能):

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'My List',
        home: Scaffold(
          appBar: AppBar(
            title: Text('My List'),
            backgroundColor: Color.fromRGBO(255, 0, 0, 0.9),
          ),
          body: Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(
            children: [
              Expanded(child: TimeSelector()),
            ],
          )),
        ));
  }
}

abstract class ListItem {}

class TimeHeader implements ListItem {
  final String header;

  TimeHeader(this.header);
}

class TimeOption implements ListItem {
  final String timeString;
  final String meridian;

  TimeOption(this.timeString, this.meridian);
}

final List<ListItem> litems = [
  TimeHeader("Morning"),
  TimeOption("10:00", "am"),
  TimeOption("10:30", "am"),
  TimeOption("11:30", "am"),
  TimeHeader("Afternoon"),
  TimeOption("1:00", "pm"),
  TimeOption("1:30", "pm"),
  TimeOption("2:30", "pm"),
  TimeHeader("Night"),
  TimeOption("5:30", "pm"),
  TimeOption("6:30", "pm"),
  TimeOption("7:30", "pm"),
  TimeOption("8:30", "pm"),
  TimeOption("9:30", "pm"),
  TimeOption("10:30", "pm"),
  TimeOption("11:30", "pm"),
  TimeOption("11:45", "pm"),
  TimeOption("11:49", "pm"),
];

class TimeSelector extends StatelessWidget {
  final _headerFont = new TextStyle(fontWeight: FontWeight.w600, fontSize: 13.0, color: Color.fromRGBO(164, 164, 164, 1));
  final _smallerFont = const TextStyle(fontSize: 12.0);

  @override
  ListView build(BuildContext context) {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemCount: litems.length,
      itemBuilder: (BuildContext ctxt, int index) => _buildItem(ctxt, index),
    );
  }

  Widget _buildItem(BuildContext ctxt, int index) {
    final item = litems[index];

    if (item is TimeHeader) {
      return new ListTile(
        title: Text(
          item.header,
          style: _headerFont,
        ),
      );
    } else if (item is TimeOption) {
      return new ListTile(
        title: Text(
          item.timeString + item.meridian.toUpperCase(),
          style: _smallerFont,
        ),
      );
    } else {
      return new Text("UNKNOWN");
    }
  }
}

字符串

monwx1rj

monwx1rj1#

Flutter ListView在调试模式下的滚动肯定有问题。虽然您的代码将在发布模式下正常运行,没有任何滚动延迟。但是,如果您想在调试模式下滚动而没有任何延迟,您可以首选SingleChildScrollView而不是ListView。只需将滚动小部件放在一个列中,并将该列作为SingleChildScrollView的子列。在您的情况下,你正在使用ListView.builder。我建议你应该使用这个代码来实现一个非常平滑的滚动:

@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Flexible(
            child: ListView.builder(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              padding: const EdgeInsets.all(16.0),
              itemCount: litems.length,
              itemBuilder: (BuildContext ctxt, int index) => _buildItem(ctxt, index),
            ),
          )
        ],
      ),
    );
  }

字符串
不要忘记使用mainAxisSize: MainAxisSize.min作为列大小,shrinkWrap: truephysics: NeverScrollableScrollPhysics()

**physics:NeverScrollableScrollPhysics()**将禁用ListView.builder的滚动,您将体验到列表的极其平滑的滚动

tpxzln5u

tpxzln5u2#

如果您正在处理列表项数量非常少的静态数据,则可以使用addAutomaticKeepAlives: true加快列表速度

ckocjqey

ckocjqey3#

我设法通过禁用叶轮渲染后端修复了iOS上的滚动不稳定。
要在iOS上禁用叶轮,请在应用的Info.plist文件中的顶级标记下添加以下标记。

<key>FLTEnableImpeller</key>
<false />

字符串

相关问题