Flutter ListView.builder()小部件的横轴占据了整个屏幕的高度 [英] Flutter ListView.builder() widget's cross Axis is taking up the entire Screen height
问题描述
我正在Flutter中的 Container 中使用 ListView.builder (scrollDirection:Horizontal)小部件.ListView的主轴占据了预期的整个屏幕宽度.我希望ListView的crossAxis(垂直方向)占据ListView的Item高度(仅包装内容)，但是它占据了整个屏幕的高度.
我创建了DartPard来解释问题.我希望ListView占用Item的高度，而不是整个屏幕的高度.Dart Pad链接:
import'package:flutter/material.dart';最后的颜色darkBlue = Color.fromARGB(255，18，32，47);void main(){runApp(MyApp());}MyApp类扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回MaterialApp(主题:ThemeData.dark().copyWith(scaffoldBackgroundColor:darkBlue)，debugShowCheckedModeBanner:否，家:脚手架(正文:SafeArea(子代:集装箱(//高度:100，//无需在此处指定颜色:Colors.white，子级:SingleChildScrollView(scrollDirection:Axis.horizontal，子级:Row(子代:< Widget> [容器(高度:300，宽度:300，颜色:Colors.amber [600]，子代:const Center(子代:Text('Entry A'))，)，容器(高度:100，颜色:Colors.amber [500]，子代:const Center(子代:Text('Entry B'))，)，容器(高度:50，宽度:100，颜色:Colors.amber [100]，子代:const Center(子代:Text('Entry C'))，)，容器(高度:300，宽度:300，颜色:Colors.amber [600]，子代:const Center(子代:Text('Entry A'))，)，容器(高度:100，颜色:Colors.amber [500]，子代:const Center(子代:Text('Entry B'))，)，容器(高度:50，宽度:100，颜色:Colors.amber [100]，子代:const Center(子代:Text('Entry C'))，)，容器(高度:300，宽度:300，颜色:Colors.amber [600]，子代:const Center(子代:Text('Entry A'))，)，容器(高度:100，颜色:Colors.amber [500]，子代:const Center(子代:Text('Entry B'))，)，容器(高度:50，宽度:100，颜色:Colors.amber [100]，子代:const Center(子代:Text('Entry C'))，)，容器(高度:300，宽度:300，颜色:Colors.amber [600]，子代:const Center(子代:Text('Entry A'))，)，容器(高度:100，颜色:Colors.amber [500]，子代:const Center(子代:Text('Entry B'))，)，容器(高度:50，宽度:100，颜色:Colors.amber [100]，子代:const Center(子代:Text('Entry C'))，)，容器(高度:300，宽度:300，颜色:Colors.amber [600]，子代:const Center(子代:Text('Entry A'))，)，容器(高度:100，颜色:Colors.amber [500]，子代:const Center(子代:Text('Entry B'))，)，容器(高度:50，宽度:100，颜色:Colors.amber [100]，子代:const Center(子代:Text('Entry C'))，)，]，)，))，)，)，);}} +++++++在OP注释之后添加+++++++
如果您想将构建器用于动态列表，则始终可以定义自己的构建器！
import'dart:math';导入'package:flutter/material.dart';最后的颜色darkBlue = Color.fromARGB(255，18，32，47);void main(){runApp(MyApp());}MyApp类扩展了StatelessWidget {var _randHeight = Random();List< int>someList = [1，2，3，4，5，78，9，101112131415161718岁1920];var randHeight = Random();@override窗口小部件build(BuildContext context){返回MaterialApp(主题:ThemeData.dark().copyWith(scaffoldBackgroundColor:darkBlue)，debugShowCheckedModeBanner:否，家:脚手架(正文:SafeArea(子代:集装箱(颜色:Colors.white，子级:SingleChildScrollView(scrollDirection:Axis.horizontal，子级:Row(crossAxisAlignment:CrossAxisAlignment.center，子代:_createChildren()，)，))，)，)，);}列表< Widget>_createChildren(){return List< Widget> .generate(someList.length，(int index){返回容器(颜色:Colors.red，宽度:100，高度:_randHeight.nextInt(300).toDouble()，子级:Text(someList [index] .toString()，样式:TextStyle(颜色:Colors.black))，);});}} 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.
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)),
);
});
}
}
这篇关于Flutter ListView.builder()小部件的横轴占据了整个屏幕的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
