flutter - 带有 Sliver 小部件的 iPhone XR CustomScrollView 滚动问题

Question

我没有 checkin 真实设备，而是测试模拟器。

我在 CustomScrollView 中编写了一些 Sliver 代码。看下面的代码。当我运行代码片段时，我在模拟器 iPhone XR 中上下滚动时遇到屏幕滚动不顺畅。 检查其他模拟器后，它运行良好吗？下面的代码有什么问题吗？我不这么认为，否则我不会在其他模拟器上工作？

import 'package:flutter/material.dart';

class AnimalWidget extends StatefulWidget {
  _AnimalWidgetState createState() => _AnimalWidgetState();
}

class _AnimalWidgetState extends State<AnimalWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: 210,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.network(
                  'https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681',
                  fit: BoxFit.cover),
              title: Text('Animals Dashboard'),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              margin: EdgeInsets.only(left: 8, top: 12, right: 8),
              child: Card(
                elevation: 4,
                child: Container(
                  margin: EdgeInsets.only(left: 8, top: 8, right: 8, bottom: 8),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Container(
                        decoration: BoxDecoration(
                            border: Border.all(
                                color: Theme.of(context).primaryColor,
                                width: 1,
                                style: BorderStyle.solid)),
                        child: ListTile(
                          leading: Icon(Icons.fastfood,
                              color: Theme.of(context).primaryColor, size: 30),
                          title: Text(
                            "Monkey",
                            style: TextStyle(
                                color: Theme.of(context).primaryColor),
                          ),
                          trailing: Icon(
                            Icons.arrow_drop_down,
                            color: Theme.of(context).primaryColor,
                            size: 40,
                          ),
                          onTap: () {},
                        ),
                      ),
                      SizedBox(
                        height: 15,
                      ),
                      Container(
                        decoration: BoxDecoration(
                            border: Border.all(
                                color: Theme.of(context).primaryColor,
                                width: 1,
                                style: BorderStyle.solid)),
                        child: ListTile(
                          leading: Icon(Icons.local_florist,
                              color: Theme.of(context).primaryColor, size: 30),
                          title: Text(
                            "Donkey",
                            style: TextStyle(
                                color: Theme.of(context).primaryColor),
                          ),
                          trailing: Icon(
                            Icons.arrow_drop_down,
                            color: Theme.of(context).primaryColor,
                            size: 40,
                          ),
                          onTap: () {},
                        ),
                      ),
                      SizedBox(
                        height: 15,
                      ),
                      Container(
                        decoration: BoxDecoration(
                            border: Border.all(
                                color: Theme.of(context).primaryColor,
                                width: 1,
                                style: BorderStyle.solid)),
                        child: ListTile(
                          leading: Icon(Icons.find_replace,
                              color: Theme.of(context).primaryColor, size: 30),
                          title: Text(
                            "Camel",
                            style: TextStyle(
                                color: Theme.of(context).primaryColor),
                          ),
                          trailing: Icon(
                            Icons.arrow_drop_down,
                            color: Theme.of(context).primaryColor,
                            size: 40,
                          ),
                          onTap: () {},
                        ),
                      ),
                      SizedBox(height: 15),
                      Container(
                          height: 50,
                          color: Colors.teal,
                          child: FlatButton(
                            onPressed: () {},
                            color: Theme.of(context).primaryColor,
                            child: Text('SELECT ANIMAL',
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 16,
                                    fontWeight: FontWeight.w600)),
                          )),
                      SizedBox(height: 15),
                    ],
                  ),
                ),
              ),
            ),
          ),
          SliverList(delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return ListTile(
                leading: CircleAvatar(
                  child: Text(
                    'A',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                    textAlign: TextAlign.center,
                  ),
                ),
                title: Text('Animal => $index'),
              );
            },
          )),
        ],
      ),
    );
  }
}

对于它，只需复制并粘贴代码即可。

Answer 1

这可能与模拟器有关。我在 iPhone X 模拟器、Pixel 2XL 模拟器和我真正的 Pixel 3XL 设备上测试了您的代码。当我停止滚动时，iPhone X 模拟器就像页面滚动一样滞后，而 2XL 模拟器就像预期的那样正常。 3XL真机也如预期正常。