可滚动列和ListView.builder

Question

我想有一个列和ListView。使用SingleChildScrollView来实现可滚动。我试着包装列或扩展的SingleChildScrollView，但我仍然没有赢。我只想要ListView。构建器和它上面的容器是可滚动的。请帮助…

我得到一个错误，说:RenderFlex子有非零flex，但传入的高度约束是无界的.

import 'package:flutter/material.dart';
import 'package:ionicons/ionicons.dart';
import 'package:provider/provider.dart';
import '../widgets/product_item.dart';
import '../providers/products.dart';
class ProductsOverviewScreen extends StatelessWidget {
const ProductsOverviewScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final productsData = Provider.of<Products>(context);
final products = productsData.items;
return Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: () {},
icon: const Icon(
Ionicons.notifications_outline,
),
),
title: SizedBox(
width: MediaQuery.of(context).size.width * 0.3,
height: MediaQuery.of(context).size.height * 0.1,
child: Image.asset(
'assets/logo.png',
fit: BoxFit.contain,
),
),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(
Ionicons.cart_outline,
),
),
],
),
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 140,
width: MediaQuery.of(context).size.width * 0.9,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(26.0),
color: Colors.grey[300],
),
),
Row(
children: const [
Padding(
padding: EdgeInsets.only(
left: 15.0,
top: 20.0,
),
child: Text(
'Place Order',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
),
],
),
Expanded(
child: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: products.length,
itemBuilder: (ctx, i) => ProductItem(
products[i].id,
products[i].name,
products[i].size,
products[i].price,
products[i].image,
),
),
)
],
),
),
);
}
}

Answer 1

//你的问题的解决方案是使Listview不使用这里的输入代码可滚动，并设置shrinkwrap为true。然后在SingleChildScrollView中包装第一列。这种方法不需要Expanded或Flexible Widget。

import 'package:flutter/material.dart';
class ProductsOverviewScreen extends StatelessWidget {
const ProductsOverviewScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final productsData = Provider.of<Products>(context);
final products = productsData.items;
return Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: () {},
icon: const Icon(
Icons.info_outline,
),
),
title: SizedBox(
width: MediaQuery.of(context).size.width * 0.3,
height: MediaQuery.of(context).size.height * 0.1,
child: Image.asset(
'assets/logo.png',
fit: BoxFit.contain,
),
),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(
Icons.shopping_cart_outlined,
),
),
],
),
body: SingleChildScrollView(
child: Column(
// mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 140,
width: MediaQuery.of(context).size.width * 0.9,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(26.0),
color: Colors.grey[300],
),
),
Row(
children: const [
Padding(
padding: EdgeInsets.only(
left: 15.0,
top: 20.0,
),
child: Text(
'Place Order',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
),
],
),
ListView.builder(
shrinkWrap: true,
itemCount: 10,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (ctx, i) => ProductItem(
products[i].id,
products[i].name,
products[i].size,
products[i].price,
products[i].image,
),
)
],
),
),
);
}
}

Answer 2

查看您的代码，您不需要SingleChildScrollView小部件。把它拿掉。listView是带有滚动行为的，你不需要添加它。

如果你有别的意思，请告诉我，我可以帮忙。

如果您仍然有Renderflex错误，那么将Column小部件包装在Flexible小部件中

Flexible(child: Column(children:[..

Answer 3

这是数千种解决方案中的一种，它由一个列表视图嵌套在另一个列表视图中组成。如果你愿意，你可以创建列表视图。构建器水平。

import 'package:flutter/material.dart';
import 'package:ionicons/ionicons.dart';
import 'package:provider/provider.dart';
import '../widgets/product_item.dart';
import '../providers/products.dart';
class ProductsOverviewScreen extends StatelessWidget {
const ProductsOverviewScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final productsData = Provider.of<Products>(context);
final products = productsData.items;
return Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: () {},
icon: const Icon(
Ionicons.notifications_outline,
),
),
title: SizedBox(
width: MediaQuery.of(context).size.width * 0.3,
height: MediaQuery.of(context).size.height * 0.1,
child: Image.asset(
'assets/logo.png',
fit: BoxFit.contain,
),
),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(
Ionicons.cart_outline,
),
),
],
),
body: ListView(
scrollDirection: Axis.vertical,
children: [
Container(
height: 140,
width: MediaQuery.of(context).size.width * 0.9,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(26.0),
color: Colors.grey[300],
),
),
Row(
children: const [
Padding(
padding: EdgeInsets.only(
left: 15.0,
top: 20.0,
),
child: Text(
'Place Order',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
),
],
),
ListView.builder(
scrollDirection: Axis.vertical,
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
primary: false,
itemCount: products.length,
itemBuilder: (ctx, i) => ProductItem(
products[i].id,
products[i].name,
products[i].size,
products[i].price,
products[i].image,
),
)
],
),
);
}
}