Flutter ListView.builder() 小部件的横轴占据了整个屏幕高度

Question

我正在使用 ListView.builder (scrollDirection: Horizo​​ntal) 小部件内的 Container在 flutter 中。 ListView 的主轴占据了预期的整个屏幕宽度。我希望 ListView 的 crossAxis(垂直方向)占据 ListView 的 Item 高度(仅包裹内容)，但它占据了整个屏幕高度。
我创建了 DartPard 来解释这个问题。我希望 ListView 占据项目高度而不是整个屏幕高度。
飞镖垫链接: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),
                  ),  
              );
            },
          ),
         ),
        ),
       ),
      );
     }
    }

很少有可行的解决方法:

使用 Row或 Wrap而不是 ListView .

给 ListView 一个固定的高度。

我知道上面列出的方法会起作用。但我只想使用 ListView 来实现这一点。

Answer 1

这个问题与此类似:Flutter: Minimum height on horizontal list view
在仔细研究之后，我意识到 ListView 可能不是您正在寻找的小部件。
在此之前，我展示了控制 ListView 高度的唯一方法是通过固定的高度设置，因为这是 ListView 的设计目的 - 显示预先格式化的项目列表。
如果你想拥有相同的功能，让 child 设置高度，这意味着小部件只包装内容，那么我建议使用 SingleChildScrollView 与 行 (注意:确保设置scrollDirection:Axis.horizo​​ntal)
像这样:

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')),
                    ),
                  ],
                ),
              )),
        ),
      ),
    );
  }
}

+++++++在OP注释后添加+++++++
如果您想为动态列表使用构建器，您也可以随时定义自己的构建器!

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)),
      );
    });
  }
}