Cupertino DateTime 選擇器干擾滾動行為

Question

我有一個包含一系列問卷調查的應用程序。 其中一個有 5 頁長，每個頁面本質上是一個 SingleChildScrollView，其中包含 5-10 個相同自定義小部件的列，除了第一頁還包括 2 個 Cupertino 時間選擇器。 自定義小部件本身是一個包含 5 行的列 - 頂行是一個文本小部件（問題），第 2-5 行是每行包含一個可能的答案（文本小部件）和一個單選按鈕。

但是，在最初加載第一頁時通過調查問卷時，我可以上下滾動很好，但是從上到下滾動大約 5 次后，滾動變得越來越卡頓。 性能配置文件顯示滾動從前幾次滾動的 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