目前它是一個串列視圖,我知道如何正常創建一個listview.builder,但我不知道如何將它連接到Firebase。我說的是streambuilder和context以及所有這些東西。非常感謝任何幫助,我是Flutter的新手,如果這是一個明顯的/愚蠢的問題,請原諒。
Future<void> main() async {
WidgetsFlutterBinding.sureInitialized()。
await Firebase.initializeApp()。
runApp(FireApp())。
}
class FireApp extends StatefulWidget{
@override
_FireAppState createState() => _FireAppState()。
}
class _FireAppState extends State< FireApp> {
final TextController = TextEditingController();
bool isChecked = false;
@override
Widget build(BuildContext context) {
CollectionReference groceries =
FirebaseFirestore.instance.collection('groceries')。
return MaterialApp(
家。Scaffold(
appBar: AppBar(
標題。TextField(
控制器。TextController,
),
),
body: 中心(
孩子。StreamBuilder(
stream: groceries.orderBy('name').snapshots()。
builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
return ListView(
children: snapshot.data!.docs.map((grocery) {
return Center(
孩子。行(
children: [
Container(color: Colors.red,height: 50,child: Text(grocery['name'])。
復選框(
materialTapTargetSize: MaterialTapTargetSize.padded,
value: isChecked,
activeColor: Colors.black,
checkColor: Colors.greenAccent,
onChanged: (bool) {
setState(() {
isChecked = !isChecked;
});
}
)],
),
);
}).toList()。
);
},
),
),
floatingActionButton: FloatingActionButton(onPressed: () {
groceries.add({
'name': TextController.text,
});
},),
),
);
}
}
uj5u.com熱心網友回復:
我剛剛分享了一個ListView.builder的結構,你可以按照它來做
ListView.builder(
itemCount: snapShot.data.length,
itemBuilder: (context, i) {
return snapShot.hasData
? ListTile( //根據你的需要進行修改
標題。Text(snapShot.data[i].['name'])。
)
: 容器(
高度。0。
width: 0,
);
},
)
uj5u.com熱心網友回復:
下面給出了StreamBuilder和listview.builder的示例代碼
StreamBuilder<QuerySnapshot< Map<String, dynamic>> (
stream: groceries.orderBy('name').snapshots()。
builder: (context,
AsyncSnapshot<QuerySnapshot<Map<String, dynamic>> snapshot){
//你的雜貨清單。
List groceriesList =
snapshot.data.docs.map((e) => e.data()).toList()。
return ListView.builder(
itemCount: groceriesList.length,
itemBuilder: (context, i) {
//build your widget here.。
return Center(
孩子。行(
children: [
容器(
color: Colors.red,
高度。50。
孩子。Text(groceriesList[i]['name'])。
),
復選框(
materialTapTargetSize: MaterialTapTargetSize.padded,
value: isChecked,
activeColor: Colors.black,
checkColor: Colors.greenAccent,
onChanged: (bool) {
setState(() => isChecked = !isChecked)。
},
)
],
),
);
},
);
},
),
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/325751.html
標籤:
