iPhone XR上使用带有Sliver小部件的CustomScrollView出现滚动问题

4

我还没有在真实设备上测试,只在模拟器中进行了测试。

我在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'),
              );
            },
          )),
        ],
      ),
    );
  }
}

对于 IT 技术,只需复制并粘贴代码即可。

1个回答

0

可能是关于模拟器的问题。我在iPhone X模拟器、Pixel 2XL模拟器和我的真实Pixel 3XL设备上测试了您的代码。iPhone X模拟器在停止滚动时会出现页面滚动的延迟,而2XL模拟器则像预期的那样正常。此外,3XL真实设备也像预期的那样正常。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接