[英]Flutter nested ListView
我有 2 個ListViews
,第一個是頁面頂部,顯示故事,所以它是horizontal
的,第二個是 Showing Posts,所以它是vertical
的。
我想要的是,當我scroll
我的帖子時,我希望故事立即消失,它們被卡在頁面頂部。
說明視頻這個
@override
Widget build(context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
Container(
padding: EdgeInsets.only(left: 15),
height: 90,
width: double.infinity,
child: StreamBuilder(
stream: masterListStart().asStream(),
builder: (context, snapshot) {
return (ConnectionState.done == snapshot.connectionState)
//First Listview
? ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: storysList.length,
itemBuilder: (context, index) {
//
StoryItems data = storysList[index];
//
return StoryItems(
data: data,
);
},
)
: CircularProgressIndicator();
}
},
),
);
//Second ListView
Expanded(
child: RefreshIndicator(
child: ListView(
children: posts,
),
key: refreshkey,
onRefresh: () => refreshlist(),
);
),
],
),
),
);
}
您可以將您的故事列表視圖放在 SliverAppBar 中,當您向上滾動時它會隱藏您的故事列表。 這是鏈接https://flutter.dev/docs/cookbook/lists/floating-app-bar
您可以像這樣使用CustomScrollView 。
CustomScrollView(
slivers : [
SliverToBoxAdapter(child : Container(height : listHeight,
child ListView(),),),
SliverList(delegate: SliverChildBuilderDelegate((context,index){
return Your Item;
},
childCount: data.length
),]
您可以在Column
SingleChildScrollView
頂部添加以加載整個屬性。
然后您可以使用以下code
在第二個ListView
中停止scroll
:
ListView(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true, // Edit new line
.
.
),
在這種情況下,您將有一個跟隨SingleChildScrollView
的vertical scroll
,並且頁面是完全動畫的。
使用singlchildscrollview
作為父小部件而不是列參見示例
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Headline',
style: TextStyle(fontSize: 18),
),
SizedBox(
height: 200.0,
child: ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 15,
itemBuilder: (BuildContext context, int index) => Card(
child: Center(child: Text('Dummy Card Text')),
),
),
),
Text(
'Demo Headline 2',
style: TextStyle(fontSize: 18),
),
Card(
child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
),
Card(
child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
),
Card(
child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
),
Card(
child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
),
Card(
child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
),
],
),
)`
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.