库比蒂诺DateTime拾取器干扰滚动行为

Question

我有一个应用程序，其中包括一系列的调查问卷。其中一个页面有5页长，每个页面本质上都是一个包含相同自定义小部件的5-10项的列的SingleChildScrollView，除了第一页之外，第一页还包括两个库比蒂诺时间选择器。自定义小部件本身是一个5行的列-最上面的行是一个文本小部件(问题)，第2-5行是行，每个行都包含一个可能的答案(文本小部件)和一个单选按钮。

然而，当第一页开始加载时，当我浏览问卷时，我可以向上和向下滚动，但是在从上到下滚动了大约5次后，滚动变得越来越简陋。性能配置文件显示，滚动从前几个滚动到10 few或更低的120 few。现在，我花了一段时间假设这是一个滚动问题，但我也注意到，如果我在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