我正在構建一個布局，我需要在列中添加一個水平串列視圖，我嘗試使其擴展或靈活，但似乎沒有任何作業，這是我將串列放入的列：
class HomePage extends StatelessWidget {
HomePage({super.key});
double? h;
double? w;
@override
Widget build(BuildContext context) {
h = MediaQuery.of(context).size.height;
w = MediaQuery.of(context).size.width;
return SafeArea(
child: Scaffold(
body: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Padding(
padding: EdgeInsets.only(left: (h! * 0.02)),
child: Container(
width: w! * 0.09,
height: h! * 0.06,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(15),
),
child: Image.asset(
"assets/images/menu_from_left.png",
// fit: BoxFit.fitHeight,
),
)),
Padding(
padding: EdgeInsets.only(top: h! * 0.04, left: 15.0),
child: Text(
" Discover New Opportunities !",
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
),
SizedBox(
height: h! * 0.02,
),
Padding(
padding: const EdgeInsets.all(15.0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.circular(8)),
child: Row(children: [
Icon(Icons.search),
Expanded(
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Search for new Jobs"),
showCursor: true,
cursorColor: Colors.black,
))
]),
),
),
SizedBox(
height: h! * 0.0119,
),
Padding(
padding: EdgeInsets.only(left: 15.0),
child: Text(
"For You !",
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
),
SizedBox(
height: h! * 0.0119,
),
Container(
height: 140,
width: 200,
child: Expanded(
child: ListView.builder(
// shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: ((context, index) {
return ItemBuilder(h, w, cards[index]);
}),
itemCount: cards.length,
),
),
),
SizedBox(
height: 20,
)
]),
),
);
}
}
這是我要創建的 listview 專案，它應該有多個專案 m 但我只是先將它 trting 并且它不適用于一個專案：
Widget ItemBuilder(h, w, Map mp) {
return Padding(
padding: const EdgeInsets.all(20.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Container(
height: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
border: Border.all(color: Colors.black)),
child: Image.asset(
mp["image"],
width: w! * 0.28,
fit: BoxFit.cover,
height: w! * 0.18,
),
),
),
Spacer(),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: w! * 0.25,
height: w! * 0.18,
decoration: BoxDecoration(
color: mp["jobcontainercolor"],
border: Border.all(
color: mp["jobcontainercolor"]),
borderRadius: BorderRadius.circular(8)),
child: mp["jobcontainertitle"]),
)
]),
),
SizedBox(
height: w! * 0.05,
),
Padding(padding: EdgeInsets.all(8), child: mp["Job_title"]),
Spacer(),
Padding(
padding: EdgeInsets.fromLTRB(8, 4, 0, 24),
child: mp["job_salary"])
]),
color: mp["cardcolor"],
),
));
}
我有幾個例外，但最后一個是這樣的：
FlutterError (RenderFlex children have non-zero flex but incoming width constraints are unbounded.
When a row is in a parent that does not provide a finite width constraint, for example if it is in a horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the horizontal direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.
Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children (using Flexible rather than Expanded). This will allow the flexible children to size themselves to less than the infinite remaining space they would otherwise be forced to take, and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.
If this message did not help you determine the problem, consider using debugDumpRenderTree():
https://flutter.dev/debugging/#rendering-layer
http://api.flutter.dev/flutter/rendering/debugDumpRenderTree.html
The affected RenderFlex is:
RenderFlex#985b1 relayoutBoundary=up10 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE(creator: Row ← Expanded ← Column ← ColoredBox ← ConstrainedBox ← Container ← ClipRRect ← Padding ← RepaintBoundary ← IndexedSemantics ← _SelectionKeepAlive ← NotificationListener<KeepAliveNotification> ← ?, parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight (can use size), constraints: BoxConstraints(0.0<=w<=Infinity, h=0.0), size: MISSING, direction: horizontal, mainAxisAlignment: start, mainAxisSize: max, crossAxisAlignment: start, textDirection: ltr, verticalDirection: down)
The creator information is set to:
Row ← Expanded ← Column ← ColoredBox ← ConstrainedBox ← Container ← ClipRRect ← Padding ← RepaintBoundary ← IndexedSemantics ← _SelectionKeepAlive ← NotificationListener<KeepAliveNotification> ← ?
See also: https://flutter.dev/layout/
If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
https://github.com/flutter/flutter/issues/new?template=2_bug.md)
uj5u.com熱心網友回復：
您需要Expanded直接在里面使用小部件Column，試試這個：
Expanded(child: Container(
height: 140,
width: 200,
child: ListView.builder(
// shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: ((context, index) {
return ItemBuilder(h, w, cards[index]);
}),
itemCount: cards.length,
),),),
Note使用時Expanded不需要設定height水平串列。
更新：在您的中ItemBuilder，您正在呼叫 spacer，這意味著在水平串列視圖中呼叫無限空間，請嘗試在以下位置向此容器添加寬度ItemBuilder：
Container(
height: 200,
width:300,//<--- add this
child: Column(
...
),
),
uj5u.com熱心網友回復：
您可以Expanded在 Sizedbox 上洗掉并使用高度，
SizedBox(
height: 140,
// width: 200, //not needed
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: ((context, index) {
要修復 ItemBuilder 問題，請Expanded從 Row 小部件中洗掉
Widget ItemBuilder(h, w, Map mp) {
return Padding(
padding: const EdgeInsets.all(20.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Container(
height: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
border: Border.all(color: Colors.black)),
child: Image.asset(
mp["image"],
width: w! * 0.28,
fit: BoxFit.cover,
height: w! * 0.18,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: w! * 0.25,
height: w! * 0.18,
decoration: BoxDecoration(
// color: mp["jobcontainercolor"],
border: Border.all(
// color: mp["jobcontainercolor"],
),
borderRadius: BorderRadius.circular(8)),
// child: mp["jobcontainertitle"],
),
)
],
),
// SizedBox(
// height: w! * 0.05,
// ),
// Padding(padding: EdgeInsets.all(8), child: mp["Job_title"]),
// Spacer(),
// Padding(
// padding: EdgeInsets.fromLTRB(8, 4, 0, 24),
// child: mp["job_salary"],
// )
]),
// color: mp["cardcolor"],
),
),
);
}
也嘗試使用 SizedBox 而不是Spacer
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/511553.html
標籤：扑镖列表显示颤振布局