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

Question

我在 Flutter 中使用ListView.builder(scrollDirection: Horizo​​ntal) 小部件Container。ListView 的主轴占据了预期的整个屏幕宽度。我希望 ListView 的 crossAxis（垂直方向）占据 ListView 的 Item 高度（仅包装内容），但它占据了整个屏幕高度。

我创建了 DartPard 来解释这个问题。我希望 ListView 占据项目高度而不是整个屏幕高度。Dart Pad Link : DartPard 显示了我面临的问题

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

很少有可行的解决方法：

1. 使用RoworWrap代替ListView.
2. 给 ListView 一个固定的高度。

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

标签： flutterlistviewwidget

Answer 1

这个问题类似于：Flutter: Minimum height on Horizo​​ntal list view

经过一番挖掘，我意识到 ListView 可能不是您正在寻找的小部件。

在此之前，我展示了控制 ListView 高度的唯一方法是通过固定的高度设置，因为这是 ListView 的设计目的 - 显示预先格式化的项目列表。

如果您想在孩子设置高度时具有相同的功能，这意味着小部件仅包装内容，那么我建议使用带有Row的SingleChildScrollView （注意：确保设置滚动方向：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)),
      );
    });
  }
}