CustomScrollView 未检测到滚动
CustomScrollView not detecting scrolling
我是 flutter 的新手,想知道是否有人可以帮助我进行滚动机制。我是第一次尝试 SliverAppBar
,它可以正确地处理栏本身的运动。但是,我有一个 ListView.builder
构建了我放置在 sliverfillremaining 中的小部件,它没有检测到列表的移动。任何帮助将不胜感激。
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Row(
children: <Widget>[
Text('appName')],),
expandedHeight: 110,
floating: true,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
background: Container(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('my text 1', style: TextStyle(
fontFamily: 'OpenSans',
),
softWrap: true,),
Text('my Text', style: TextStyle(
fontFamily: 'OpenSans',
),),],),),),),),
SliverFillRemaining(
hasScrollBody: true,
child: Container(
child: NoteList(
items: items,
),
),
)
],
),
笔记列表
class NoteList extends StatelessWidget {
const NoteList({
@required this.items,
});
final List<Note> items;
Future _navigateToNote(BuildContext context, Note note) => Navigator.push(
context,
MaterialPageRoute(builder: (context) => NoteScreen(note)),
);
Widget _itemBuilder(BuildContext context, int position) {
final cardShape = const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(0)),
);
return Padding(
padding: const EdgeInsets.only(top:0, bottom: 0),
child: Card(
shape: cardShape,
child: InkWell(
onTap: () => _navigateToNote(context, items[position]),
customBorder: cardShape,
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Column(
children: <Widget>[
ListTile(
title: Text('${items[position].theItem}',
),
),
],
),
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scrollbar(
child: ListView.builder(
itemCount: items.length,
padding: const EdgeInsets.only(left: 2, right: 2),
itemBuilder: _itemBuilder,
),
);
}
}
您正在 CustomScrollView
中使用 ListView
。两者都是可滚动的,因此发生冲突。
要解决此问题,请将 ListView
替换为 SliverList
— 用于显示 CustomScrollView
中项目列表的特殊小部件。
这里不需要SliverFillRemaining
,所以代码为:
Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
...
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Card(
// any nested widgets
child: ListTile(
title: Text(items[index].name),
),
),
childCount: items.length,
),
),
],
),
);
我是 flutter 的新手,想知道是否有人可以帮助我进行滚动机制。我是第一次尝试 SliverAppBar
,它可以正确地处理栏本身的运动。但是,我有一个 ListView.builder
构建了我放置在 sliverfillremaining 中的小部件,它没有检测到列表的移动。任何帮助将不胜感激。
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Row(
children: <Widget>[
Text('appName')],),
expandedHeight: 110,
floating: true,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
background: Container(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('my text 1', style: TextStyle(
fontFamily: 'OpenSans',
),
softWrap: true,),
Text('my Text', style: TextStyle(
fontFamily: 'OpenSans',
),),],),),),),),
SliverFillRemaining(
hasScrollBody: true,
child: Container(
child: NoteList(
items: items,
),
),
)
],
),
笔记列表
class NoteList extends StatelessWidget {
const NoteList({
@required this.items,
});
final List<Note> items;
Future _navigateToNote(BuildContext context, Note note) => Navigator.push(
context,
MaterialPageRoute(builder: (context) => NoteScreen(note)),
);
Widget _itemBuilder(BuildContext context, int position) {
final cardShape = const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(0)),
);
return Padding(
padding: const EdgeInsets.only(top:0, bottom: 0),
child: Card(
shape: cardShape,
child: InkWell(
onTap: () => _navigateToNote(context, items[position]),
customBorder: cardShape,
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Column(
children: <Widget>[
ListTile(
title: Text('${items[position].theItem}',
),
),
],
),
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scrollbar(
child: ListView.builder(
itemCount: items.length,
padding: const EdgeInsets.only(left: 2, right: 2),
itemBuilder: _itemBuilder,
),
);
}
}
您正在 CustomScrollView
中使用 ListView
。两者都是可滚动的,因此发生冲突。
要解决此问题,请将 ListView
替换为 SliverList
— 用于显示 CustomScrollView
中项目列表的特殊小部件。
SliverFillRemaining
,所以代码为:
Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
...
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Card(
// any nested widgets
child: ListTile(
title: Text(items[index].name),
),
),
childCount: items.length,
),
),
],
),
);