列表视图滚动经过顶部小部件

kar*_*kar 5 dart flutter

我有以下内容,其中列表视图在文本小部件下创建良好。
但如果我向上滚动,它会滚动到顶部文本小部件。

如果我使用 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 = [
    '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',  '', '', '', '', '', '', '', '', '', '',
];
Run Code Online (Sandbox Code Playgroud)

chu*_*han 4

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

class ListTile extends StatelessWidget {
  ...
  /// Requires one of its ancestors to be a [Material] widget.
  const ListTile({
Run Code Online (Sandbox Code Playgroud)

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

在此输入图像描述

代码片段

Expanded(
    child: Material(
      child: ListView(
Run Code Online (Sandbox Code Playgroud)

或者

Material(
      child: ListTile(
        tileColor: Color(0xff1B223E),
Run Code Online (Sandbox Code Playgroud)

工作演示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 = [
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
];
Run Code Online (Sandbox Code Playgroud)