Cupertino DateTime Picker干扰滚动行为

Question

我有一个包括一系列问卷的应用程序。其中之一是5页长，每个页面本质上是一个单式唱片，其中包含5-10个相同自定义小部件的列，除了第一页外，还包括2个库比蒂诺时代的拾取器。自定义小部件本身是一个具有5行的列 - 顶行是文本窗口小部件（问题），而行2-5是其中一个可能的答案（文本窗口小部件）和一个无线电按钮。

但是，当第一页最初加载时，通过问卷调查表时，我可以上下滚动，但是在从上到下进行5个滚动大约5个滚动后，滚动变得越来越janky。性能配置文件显示，滚动从前几个滚动中的120fps变为10fps或更低。现在，我花了一段时间以为这是一个滚动问题，但是我也注意到，如果我在Appbar上按“向后”页面过渡动画也很笨拙且缓慢。

在测试时，似乎是库比蒂诺采摘者。我已经制作了一个示例应用程序（下图），以模拟问卷的文本介绍，但没有依赖性。如果该应用程序运行并注释了，并且您反复上下滚动，则帧速率很好。如果未评论采摘器并出现在应用程序中，则重复滚动会导致FPS逐渐跌落，最终很笨拙。这是在真实的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(),
          )
        ],
      ),
    );
  }
}

Answer 1

如果有人来找同一问题，这是当前主频道

https://github.com/flutter/flutter/issues/106737