[英]Add Scrolling in the ListView.builder in Flutter application
我試圖使列表視圖滾動成為可能,當我用Google搜索並且找不到可理解和簡單的解決方案時,我試圖進行自定義滾動(例如,來自鏈接https://docs.flutter.io/flutter/widgets/ListView的示例-class.html ),目前無法正常工作。
這是代碼:
CustomScrollView(
shrinkWrap: true,
slivers: <Widget>[
SliverPadding(
padding: const EdgeInsets.all(20.0),
sliver: SliverList(
delegate: SliverChildListDelegate(
<Widget>[
StreamBuilder(
stream: Firestore.instance.collection("Items").snapshots(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return new ListView.builder(
padding: const EdgeInsets.only(top: 5.0),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context,int index) {
DocumentSnapshot ds = snapshot.data.documents[index];
return new Row(
textDirection: TextDirection.ltr,
children: <Widget>[
Expanded(child: Text(ds["item1"])),
Expanded(child: Text(ds["item2"])),
Expanded(child: Text(ds["price"].toString())),
],
);
});
}
else {
return Align(
alignment: FractionalOffset.bottomCenter,
child: CircularProgressIndicator(),
);
}
},
)
],
),
),
),
],
)
請幫助我提供可滾動列表視圖的指針或示例代碼。
您不需要使用CustomScrollView。 ListView是一個滾動小部件本身。 因此,您只需要在StreamBuilder中創建它。
@override
Widget build(BuildContext context) {
return StreamBuilder<List<int>>(
stream: posts,
builder: (BuildContext context, AsyncSnapshot<List<int>> snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return const Text('Loading...');
default:
if (snapshot.data.isEmpty) {
return const NoContent();
}
return _itemList(snapshot.data);
}
},
);
}
CustomScrollView用於在其中添加Sliver小部件。
您將ListView
包裹在SliverList
,如果它們具有相同的滾動方向,則永遠不是一個好主意。 您可以使用List.generate()
生成器(效率低下)來做一Column
,也可以擺脫ListView
的其中之一:
CustomScrollView(
shrinkWrap: true,
slivers: <Widget>[
StreamBuilder(
stream: Firestore.instance.collection("Items").snapshots(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return SliverPadding(
padding: const EdgeInsets.all(20.0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
DocumentSnapshot ds = snapshot.data.documents[index];
return new Row(
textDirection: TextDirection.ltr,
children: <Widget>[
Expanded(child: Text(ds["item1"])),
Expanded(child: Text(ds["item2"])),
Expanded(child: Text(ds["price"].toString())),
],
);
},
childCount: snapshot.data.documents.length,
),
),
);
} else {
return SliverFillRemaining(
child: Center(
child: CircularProgressIndicator(),
),
);
}
},
),
],
);
如果此代碼段不起作用, StreamBuilder
與CustomScrollView
交換
ListView
本身是可滾動的列表,因此您只需使用自定義圖塊即可創建它。 這是我的待辦事項列表應用程序中的代碼,用於創建待辦事項列表。 好了,當我必須創建一個列表時,我就調用此函數。
/*Called each time the widget is built.
* This function creates the list with all items in '_todoList'
* */
Widget _buildTodoList() {
return new ListView.builder(
// itemBuilder will be automatically be called as many times as it takes for the
// list to fill up its available space, which is most likely more than the
// number of to do items we have. So, we need to check the index is OK.
itemBuilder: (context, index) {
if (index < _todoList.length) {
return _buildTodoItem(_todoList[index],index);
}
},
);
}
現在,此函數調用_buildTodoItem
函數,該函數創建一個自定義列表_buildTodoItem
貼。
/*Build a single List Tile*/
Widget _buildTodoItem(TodoItem todoItem,int index) {
//return a custom build single tile for your list
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.