我有以下内容,其中列表视图在文本小部件下创建良好。
但如果我向上滚动,它会滚动到顶部文本小部件。
如果我使用 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)
您可以复制粘贴运行下面的完整代码
解决方案:使用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
使用InkWell
,InkWell
小部件必须有一个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)
归档时间: |
|
查看次数: |
477 次 |
最近记录: |