I want to make the ListView have a same height with its content,
but always got Horizontal viewport was given unbounded height Errors
I tried to defined a SizedBox with a height as parent of the ListView , but it seems weird
All of the items was going strecth down
How can i defined this ListView without defined a height (dynamically following the content height)?
The result before using listview
After using ListView(Weird look)
There is the code :
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...OTHER CHILD,
ListView(
scrollDirection: Axis.horizontal,
children: [
HorizontalList(),
SizedBox(width: 10),
HorizontalList(),
SizedBox(width: 10),
HorizontalList(),
],
),
],
),
There is the Child Component :
Container(
width: 260,
height: 210,
decoration: BoxDecoration(
color: whiteColor,
borderRadius: BorderRadius.all(Radius.circular(14)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 1,
blurRadius: 5,
offset: Offset(0, 0),
),
],
),
child: Column(
children: [
...OTHER CHILD,
],
),
);
Set shrinkWrap: true
in ListView
and wrap ListView
with Flexible
widget.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...OTHER CHILD,
Flexible(
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: [
HorizontalList(),
SizedBox(width: 10),
HorizontalList(),
SizedBox(width: 10),
HorizontalList(),
],
),
),
],
),
This way ListView
will only take as much space as it's children need.
I think if you use this
crossAxisAlignment: CrossAxisAlignment.stretch,
instead of this
crossAxisAlignment: CrossAxisAlignment.start
then it will work.
ListView
will take all the available space.
if scrollDirection
set to Axis.horizontal
it will take all the available height or if it set to verticle
then it will take all available width. It's the default behavior.
You can use SingleChildScrollView
with Row
.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...OTHER CHILD,
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
HorizontalList(),
SizedBox(width: 10),
HorizontalList(),
SizedBox(width: 10),
HorizontalList(),
],
),
)
],
),
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.