Средство выбора DateTime из Купертино мешает прокрутке
У меня есть приложение, которое включает в себя серию анкет. Одна из них имеет длину 5 страниц, и каждая страница по сути представляет собой SingleChildScrollView со столбцом, содержащим 5-10 элементов одного и того же пользовательского виджета, кроме первой страницы, которая также включает 2 средства выбора времени из Купертино. Сам пользовательский виджет представляет собой столбец с 5 строками. Верхняя строка представляет собой текстовый виджет (вопрос), а строки 2–5 представляют собой строки, каждая из которых содержит возможный ответ (текстовый виджет) и переключатель.
Однако при просмотре анкеты, когда загружается первая страница, я могу нормально прокручивать вверх и вниз, но после примерно 5 прокруток сверху вниз прокрутка становится все более дерганой. Профиль производительности показывает, что скорость прокрутки увеличивается со 120 кадров в секунду в первых нескольких прокрутках до 10 кадров в секунду или ниже. Теперь я потратил некоторое время на то, чтобы предположить, что это была проблема с прокруткой, но я также заметил, что если я нажимаю «назад» на панели приложений, анимация перехода страницы также очень дерганная и медленная.
На тестировании кажется, что это сборщики из Купертино. Я сделал пример приложения (ниже), чтобы смоделировать текстовое представление анкеты, но без зависимостей. Если приложение запущено с закомментированными средствами выбора и вы неоднократно прокручиваете вверх и вниз, частота кадров в порядке. Если средства выбора не закомментированы и отображаются в приложении, повторная прокрутка приводит к постепенному падению частоты кадров в секунду, что в конечном итоге становится очень дерганым. Это на реальном устройстве iOS (во всяком случае, эффект гораздо меньше на симуляторе) и не требует никакого взаимодействия с средством выбора (нет необходимости выбирать время).
Кто-нибудь знает, почему это происходит?
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Scroll Test'),
),
body: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Padding(
padding: EdgeInsets.only(top: 8.0),
child: Text( 'This is an instruction to make sense of the rest of the questions'
),
),
SizedBox(
width: MediaQuery.of(context).size.width * .9,
height: MediaQuery.of(context).size.height * .2,
child: CupertinoDatePicker(
key: UniqueKey(),
use24hFormat: true,
onDateTimeChanged: (DateTime newtime) {
},
initialDateTime: DateTime(2020, 3, 6, 8),
maximumDate: DateTime(2020, 3, 6, 20),
mode: CupertinoDatePickerMode.time),
),
TestWidget(),
TestWidget(),
TestWidget(),
TestWidget(),
SizedBox(
width: MediaQuery.of(context).size.width * .9,
height: MediaQuery.of(context).size.height * .2,
child: CupertinoDatePicker(
key: UniqueKey(),
use24hFormat: true,
onDateTimeChanged: (DateTime newtime) {
},
initialDateTime: DateTime(2020, 3, 6, 8),
maximumDate: DateTime(2020, 3, 6, 20),
mode: CupertinoDatePickerMode.time),
),
TestWidget(),
TestWidget(),
TestWidget(),
TextButton(
onPressed: () {
},
child: const Text('Next'))
],
),
),
),
);
}
}
class TestWidget extends StatelessWidget {
final String quest;
final String opt1;
final String opt2;
final String opt3;
final String opt4;
const TestWidget({Key? key,
this.quest = 'Here is a question with some quite long text. And even a second sentence',
this.opt1 = "option 1",
this.opt2 = 'option 2',
this.opt3 = 'Option 3',
this.opt4 = 'Option 4'
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
height: 300,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(quest),
Row(
children: [
Expanded(
flex: 8,
child: Text(opt1)),
Expanded(
flex: 2,
child: Text('x'),
)
],
),
Row(
children: [
Expanded(
flex: 8,
child: Text(opt2)),
Expanded(
flex: 2,
child: Text('x'),
)
],
),
Row(
children: [
Expanded(
flex: 8,
child: Text(opt3)),
Expanded(
flex: 2,
child: Text('x'),
)
],
),
Row(
children: [
Expanded(
flex: 8,
child: Text(opt4)),
Expanded(
flex: 2,
child: Text('x'),
)
],
),
const Padding(
padding: EdgeInsets.only(top:8.0),
child: Divider(),
)
],
),
);
}
}
1 ответ
На случай, если кто-то придет искать ту же проблему, это оказалось актуальной ошибкой, исправленной в текущем мастер-канале.