Простой Flutter список просмотра с изменчивой прокруткой

Question

Я оценивал Flutter для использования в приложении и начал с очень простого примера списка текста.После создания этого первого представления я заметил, что представление списка имеет изменчивую прокрутку, поэтому я посмотрел поближе на демонстрационные приложения, и оказалось, что хотя Reflectly , например, красивое приложение, оно страдает от той же проблемы- очень изменчивая прокрутка с простым списком текста.До сих пор я подтверждал это на симуляторе iOS, iPhone XR, устройстве Samsung Galaxy Android и симуляторе Android Pixel 2 XL.

Я не вижу дискуссий по этому поводу, поэтому мне интересно, что я делаю что-то не такно я также скептически отношусь к тому, насколько прост мой пример и что у Reflectly та же проблема.

Мне бы очень хотелось, чтобы сообщество поняло: 1. Я делаю что-то явно неправильное / глупое, чтобы вызвать это2. Если вы запускаете на своем устройстве, вы видите то, что я вижу?3. Известно ли это и будет ли над этим работать?Если я передам Flutter, могу ли я чувствовать, что мои списки будут плавно прокручиваться в ближайшем будущем?

Ниже приведен код, который вы можете запустить, чтобы воспроизвести это (извините, это немного надумано, но я хотел поиграть сразличные функции флаттера / дротика):

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");
    }
  }
}

Answer 1

Если вы имеете дело со статическими данными очень небольшого числа элементов списка, вы можете ускорить список, используя addAutomaticKeepAlives: true