ListView 中的项目得到它的高度

Posted 2023-02-23

【中文标题】ListView 中的项目得到它的高度

【英文标题】：Items in ListView get it's height

【发布时间】：2020-08-14 14:42:23

【问题描述】：

我正在尝试使用一些卡片创建一个水平列表视图。 我希望列表视图的高度为 X，卡片的高度为 Y，我不知道为什么，但卡片的高度是列表视图的高度。 这就是我所拥有的：

class FinanceApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: SafeArea(
        child: Container(
          color: Color(0x180000),
          child: Column(
            children: <Widget>[
              Header(),
              SizedBox(
                height: 20,
              ),
              Expanded(
                child: Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(32.0),
                      topRight: Radius.circular(32.0),
                    ),
                  ),
                  child: Column(
                    children: <Widget>[
                      Container(
                        height: 250,
                        child: ListView(
                          scrollDirection: Axis.horizontal,
                          children: <Widget>[
                            CustomCard(),
                            CustomCard(),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  

编辑：唯一对我有用的是将卡片容器包装在另一个容器中，使用填充来获得我想要的大小，但这似乎不是一个很好的解决方案。

【问题讨论】：

同样的问题没有完美的答案***.com/questions/50155738/…

我想我在寻找答案时看到了该线程，尝试了那里的内容但仍然没有。谢谢，这太奇怪了，还没有答案。

在flutter repo github.com/flutter/flutter/issues/56028提出了一个问题，我们可能需要flutter团队的帮助。

【参考方案1】：

看看这个：

      import 'package:flutter/material.dart';


      class *** extends StatefulWidget 
        @override
        _***State createState() => _***State();
      

      class _***State extends State<***> 
        @override
        Widget build(BuildContext context) 
          return Scaffold(
            body:

            Center(
              child: Container(
                color: Colors.blue,
                height: 200.0,
                width: double.infinity,
                child: ListView.builder(
                  physics: BouncingScrollPhysics(),
                  scrollDirection: Axis.horizontal,
                  padding: const EdgeInsets.all(16.0),
                  itemCount: 100,
                  itemBuilder: _buildItem,
                ),
              ),
            ),
          );
        

        Widget _buildItem (BuildContext context, int index) 
          return Center(
            child: Card(
              child: Text(index.toString()),
            ),
          );
        
      

为了给孩子同样大小，考虑用容器包装卡片：

        Widget _buildItem (BuildContext context, int index) 
          return Center(
            child: Container(
              height: 100.0,
              width: 100.0,
              child: Card(
                child: Center(child: Text(index.toString())),
              ),
            ),
          );
        

【讨论】：

谢谢。是什么导致这些物品变成这个尺寸？我在这里没有看到任何设置项目大小的东西

@JohnDoah 如果我们删除此代码中的 Center 小部件，卡片将变为全高。

是的。你不想让他们居中吗？然后使用Align(alignment: Alignment.bottomCenter,)

很好的答案。现在工作。如果你知道所有孩子的身高都是一样的。

谢谢你们！我确实希望卡片居中，所以没关系。仍然很奇怪，我们必须做这个“解决方法”来实现我认为应该内置的东西。