带有 ListView 构建器的未来构建器不滚动?
Future builder with ListView builder is not scrolling?
未来构建器中的列表视图构建器不可滚动。
order_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../models_providers/order.dart';
import '../../services/global_methods.dart';
import 'empty_order.dart';
import 'full_order.dart';
class OrderScreen extends StatefulWidget {
static const routeName = '/Order-screen';
const OrderScreen({Key? key}) : super(key: key);
@override
State<OrderScreen> createState() => _OrderScreenState();
}
class _OrderScreenState extends State<OrderScreen> {
@override
void initState() {
super.initState();
}
GlobalMethods globalMethods = GlobalMethods();
@override
Widget build(BuildContext context) {
final orderProvider = Provider.of<OrderProvider>(context);
return FutureBuilder(
future: orderProvider.fetchOrders(),
builder: (context, snapshot) {
if (orderProvider.getOrders.isEmpty) {
return const Scaffold(
body: EmptyOrder(),
);
} else {
return Scaffold(
appBar: AppBar(
title: Text('Order (${orderProvider.getOrders.length})'),
),
body: SingleChildScrollView(
child: Column(
children: [
ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: orderProvider.getOrders.length,
itemBuilder: (ctx, i) {
return ChangeNotifierProvider.value(
value: orderProvider.getOrders[i],
child: const FullOrder(),
);
},
),
],
),
),
);
}
});
}
}
full_order.dart
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
class FullOrder extends StatelessWidget {
const FullOrder({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final FirebaseAuth _auth = FirebaseAuth.instance;
User? user = _auth.currentUser;
var _uid = user!.uid;
// it enable scrolling on small device
return FutureBuilder(
future: FirebaseFirestore.instance.collection('orders')
.where('userId', isEqualTo: _uid)
.get(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done ||
snapshot.hasData) {
List<QueryDocumentSnapshot> docs = (snapshot.data! as QuerySnapshot).docs;
return ListView.builder(
shrinkWrap: true,
itemCount: docs.length,
itemBuilder: (context, index) {
var data = docs[index];
var dataOrders = data['orders'] as List<dynamic>;
var mappedDataOrders = dataOrders.map((o) => (o as Map<String, dynamic>)).toList();
return Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Order Id: ${data['orderId']}'),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Order Date: ${DateFormat('dd/MM/yyyy').format(data['createdAt'].toDate())}'),
Text('Order Time: ${DateFormat('hh:mm a').format(data['createdAt'].toDate())}'),
],),
),
Padding(
padding: const EdgeInsets.all(4.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Name: ${data['name']}', style: const TextStyle(fontWeight: FontWeight.bold),),
Text('Contact: ${data['phoneNumber'].toString()}', style: const TextStyle(fontWeight: FontWeight.bold),),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('Delivery Slot', style: TextStyle(fontWeight: FontWeight.bold),),
Text('${data['deliverySlot']}'),
],
),
Column(
children: [
Text('Address: ${data['addressType']}', style: const TextStyle(fontWeight: FontWeight.bold),),
Text('${data['address']}'),
Text('${data['area']}'),
Text('${data['city']}')
],
)
],
),
...List.generate(
mappedDataOrders.length,
(index) {
var order = mappedDataOrders[index];
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(order['title']),
Text(order['unit'].toString()),
Text(order['quantity'].toString()),
Text(order['price'].toString()),
],
),
],
);
}
)
]
)
);
}
);
}
return const Center(
child: SizedBox(
width: 100,
height: 100,
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
strokeWidth: 5
)
)
);
}
);
}
}
SingleChildScrollView
和 Column
是不需要的,ListView
本身是可滚动的。
我能够重新创建正在发生的错误,您只需删除 Column
和 SingleChildScrollView
然后您可以从 ListView
、
另一种解决方案是禁用 ListView
的滚动并使用 SingleChildScrollView
滚动,您可以通过添加以下内容来禁用 ListView
的滚动:
physics: NeverScrollableScrollPhysics()
未来构建器中的列表视图构建器不可滚动。
order_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../models_providers/order.dart';
import '../../services/global_methods.dart';
import 'empty_order.dart';
import 'full_order.dart';
class OrderScreen extends StatefulWidget {
static const routeName = '/Order-screen';
const OrderScreen({Key? key}) : super(key: key);
@override
State<OrderScreen> createState() => _OrderScreenState();
}
class _OrderScreenState extends State<OrderScreen> {
@override
void initState() {
super.initState();
}
GlobalMethods globalMethods = GlobalMethods();
@override
Widget build(BuildContext context) {
final orderProvider = Provider.of<OrderProvider>(context);
return FutureBuilder(
future: orderProvider.fetchOrders(),
builder: (context, snapshot) {
if (orderProvider.getOrders.isEmpty) {
return const Scaffold(
body: EmptyOrder(),
);
} else {
return Scaffold(
appBar: AppBar(
title: Text('Order (${orderProvider.getOrders.length})'),
),
body: SingleChildScrollView(
child: Column(
children: [
ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: orderProvider.getOrders.length,
itemBuilder: (ctx, i) {
return ChangeNotifierProvider.value(
value: orderProvider.getOrders[i],
child: const FullOrder(),
);
},
),
],
),
),
);
}
});
}
}
full_order.dart
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
class FullOrder extends StatelessWidget {
const FullOrder({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final FirebaseAuth _auth = FirebaseAuth.instance;
User? user = _auth.currentUser;
var _uid = user!.uid;
// it enable scrolling on small device
return FutureBuilder(
future: FirebaseFirestore.instance.collection('orders')
.where('userId', isEqualTo: _uid)
.get(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done ||
snapshot.hasData) {
List<QueryDocumentSnapshot> docs = (snapshot.data! as QuerySnapshot).docs;
return ListView.builder(
shrinkWrap: true,
itemCount: docs.length,
itemBuilder: (context, index) {
var data = docs[index];
var dataOrders = data['orders'] as List<dynamic>;
var mappedDataOrders = dataOrders.map((o) => (o as Map<String, dynamic>)).toList();
return Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Order Id: ${data['orderId']}'),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Order Date: ${DateFormat('dd/MM/yyyy').format(data['createdAt'].toDate())}'),
Text('Order Time: ${DateFormat('hh:mm a').format(data['createdAt'].toDate())}'),
],),
),
Padding(
padding: const EdgeInsets.all(4.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Name: ${data['name']}', style: const TextStyle(fontWeight: FontWeight.bold),),
Text('Contact: ${data['phoneNumber'].toString()}', style: const TextStyle(fontWeight: FontWeight.bold),),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('Delivery Slot', style: TextStyle(fontWeight: FontWeight.bold),),
Text('${data['deliverySlot']}'),
],
),
Column(
children: [
Text('Address: ${data['addressType']}', style: const TextStyle(fontWeight: FontWeight.bold),),
Text('${data['address']}'),
Text('${data['area']}'),
Text('${data['city']}')
],
)
],
),
...List.generate(
mappedDataOrders.length,
(index) {
var order = mappedDataOrders[index];
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(order['title']),
Text(order['unit'].toString()),
Text(order['quantity'].toString()),
Text(order['price'].toString()),
],
),
],
);
}
)
]
)
);
}
);
}
return const Center(
child: SizedBox(
width: 100,
height: 100,
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
strokeWidth: 5
)
)
);
}
);
}
}
SingleChildScrollView
和 Column
是不需要的,ListView
本身是可滚动的。
我能够重新创建正在发生的错误,您只需删除 Column
和 SingleChildScrollView
然后您可以从 ListView
、
另一种解决方案是禁用 ListView
的滚动并使用 SingleChildScrollView
滚动,您可以通过添加以下内容来禁用 ListView
的滚动:
physics: NeverScrollableScrollPhysics()