flutter - ListView 滚动经过顶部小部件

Question

我有以下 ListView 在文本小部件下创建得很好。
但是如果我向上滚动，它会滚动经过顶部的文本小部件。
如果我使用 ListView.Builder，同样的问题。起初以为这仅在IOS平台上存在。
但现在在 Android 中也注意到了同样的问题。我已经浓缩了实现
您可以复制整个代码块并将其粘贴到 https://flutter.dev/docs/get-started/codelab-web
并重新创建问题以查看它。 (虽然它需要一段时间才能呈现)。
我能否就我做错了什么得到一些建议？
在模拟器和实际移动设备中体验相同。谢谢。

import 'package:flutter/material.dart';

void main() {
  runApp(MyAppOne());
}

class MyAppOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          body: Column(
            children: [
              Text('The List scrolls behind this text instead of stopping under it'),
              Expanded(
                child: ListView(
                  // hard coded values to simplify. accountTitles is just used to iterate
                  // based on its size which is length 30. Issue exists in this example.
                  children: accountTitles.map((e) => ListTile(
                    tileColor: Color(0xff1B223E),
                    leading: Icon(
                      Icons.home,
                      color: Colors.white,
                    ),
                    title: Text(
                      'Some title',
                      style: TextStyle(color: Colors.white),
                    ),
                    trailing: Icon(Icons.home,
                        color: Colors.white),
                  ),).toList(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

List<String> accountTitles = [
    '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',  '', '', '', '', '', '', '', '', '', '',
];

Answer 1

您可以在下面复制粘贴运行完整代码
解决方案:使用 Material包装ListView或使用 Material包装ListTileListTile的源代码描述 https://github.com/flutter/flutter/blob/1fd2f7c400a719931e9fa181a2dd19f1756a0c95/packages/flutter/lib/src/material/list_tile.dart#L731

class ListTile extends StatelessWidget {
  ...
  /// Requires one of its ancestors to be a [Material] widget.
  const ListTile({

因为ListTile使用 InkWell , InkWell小部件必须有 Material小部件作为祖先。 https://api.flutter.dev/flutter/material/InkWell-class.html

代码片段

Expanded(
    child: Material(
      child: ListView(

或者

Material(
      child: ListTile(
        tileColor: Color(0xff1B223E),

工作演示 Material包装ListView
带有 Material 的完整代码包装ListView

import 'package:flutter/material.dart';

void main() {
  runApp(MyAppOne());
}

class MyAppOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          body: Column(
            children: [
              Text(
                  'The List scrolls behind this text instead of stopping under it'),
              Expanded(
                child: Material(
                  child: ListView(
                    // hard coded values to simplify. accountTitles is just used to iterate
                    // based on its size which is length 30. Issue exists in this example.
                    children: accountTitles
                        .map(
                          (e) => ListTile(
                            tileColor: Color(0xff1B223E),
                            leading: Icon(
                              Icons.home,
                              color: Colors.white,
                            ),
                            title: Text(
                              'Some title',
                              style: TextStyle(color: Colors.white),
                            ),
                            trailing: Icon(Icons.home, color: Colors.white),
                          ),
                        )
                        .toList(),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

List<String> accountTitles = [
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
];