我想要一個 Column 和 ListView.builder 可以使用 SingleChildScrollView 滾動。我嘗試用 Expanded 包裝 Column 或 SingleChildScrollView 但我仍然沒有獲勝。我只希望 ListView.builder 和它上面的 Container 是可滾動的。請幫忙...
我收到一條錯誤訊息：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,
),
),
)
],
),
),
);
}
}
uj5u.com熱心網友回復：
這是數千種解決方案中的一種方法，它包括將一個串列視圖嵌套在另一個串列視圖中。如果你愿意，你可以使 listview.builder 水平。
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,
),
)
],
),
);
}
}
uj5u.com熱心網友回復：
// 解決您的問題的方法是使 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,
),
)
],
),
),
);
}
}
uj5u.com熱心網友回復：
查看您的代碼，您不需要SingleChildScrollView小部件。只需將其洗掉。該listView是建立與滾動的行為，你不需要添加它。
請讓我知道您是否有其他意思，我可以提供幫助。
如果仍然有Renderflex錯誤，則將Column小部件包裝在小Flexible部件中
Flexible(child: Column(children:[..
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/335005.html
上一篇：我有一個關于飛鏢功能的基本問題：