问题
I am using ListView.builder(scrollDirection: Horizontal) widget inside a Container in Flutter. The main Axis of the ListView is taking up the entire screen width which is expected. I want the ListView's crossAxis(vertical direction) to take up the ListView's Item height (only wrapping the content), but it is taking up the entire screen height.
I have created the DartPard to explain the Issue. I want the ListView to take up the Item height and not the entire screen height. Dart Pad Link : DartPard which shows the issue I am facing
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: Container(
color: Colors.white,
child: ListView.builder(
itemCount: 10,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Container(
color: Colors.red,
child: Text(
'Item $index',
style: TextStyle(color: Colors.black),
),
);
},
),
),
),
),
);
}
}
Few workarounds which will work :
- Using
RoworWrapinstead ofListView. - Giving a Fixed height to the ListView.
I know the above listed approaches will work. But I want to achieve this using a ListView only.
回答1:
This question is similar to this: Flutter: Minimum height on horizontal list view
After digging around a bit, I've realized that a ListView may not be the widget you are looking for.
Prior to this, I showed that the only way to control the height of the ListView was through a fixed setting of height because that is what a ListView is designed to do - display a list of items that is pre-formatted.
If you want to have the same functionality where the children set the height instead, meaning the widget wraps only the content, then I would suggest a SingleChildScrollView with a Row (note: Make sure to set the scrollDirection: Axis.horizontal)
Like this:
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: Container(
// height: 100, // no need to specify here
color: Colors.white,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
Container(
height: 300,
width: 300,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 100,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
width: 100,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
Container(
height: 300,
width: 300,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 100,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
width: 100,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
Container(
height: 300,
width: 300,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 100,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
width: 100,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
Container(
height: 300,
width: 300,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 100,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
width: 100,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
Container(
height: 300,
width: 300,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 100,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
width: 100,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
),
)),
),
),
);
}
}
+++++++Added after OP comment+++++++
If you want to use a builder for a dynamic list, you can always define your own too!
import 'dart:math';
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
var _randHeight = Random();
List<int> someList = [
1,
2,
3,
4,
5,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20
];
var randHeight = Random();
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: Container(
color: Colors.white,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: _createChildren(),
),
)),
),
),
);
}
List<Widget> _createChildren() {
return List<Widget>.generate(someList.length, (int index) {
return Container(
color: Colors.red,
width: 100,
height: _randHeight.nextInt(300).toDouble(),
child: Text(someList[index].toString(),
style: TextStyle(color: Colors.black)),
);
});
}
}
回答2:
Did you try to use shrinkWrap: true on listview?
来源：https://stackoverflow.com/questions/65996711/flutter-listview-builder-widgets-cross-axis-is-taking-up-the-entire-screen-he