如何将带有列表视图的小部件限制为其子项的大小？

Posted 2023-02-23

【中文标题】如何将带有列表视图的小部件限制为其子项的大小？

【英文标题】：How to constrain widget with a listview to the size of their children?

【发布时间】：2019-08-14 08:41:21

【问题描述】：

我有这个 SectorWidget，我的意思是它是解耦的。

我将向它传递一个视图列表（具有相同的高度），但我不想指定在 ListView 内部或外部硬编码的高度。我希望它占据相同高度的小部件，例如 android 中的 wrap_content。但是我在搜索后尝试了很多方法（如this或this），但无法实现。在我的具体情况下有没有办法做到这一点？

import 'package:flixapp/colors.dart';
import 'package:flutter/material.dart';

class SectorWidget extends StatelessWidget 
  final SectorViewModel viewModel;

  SectorWidget(this.viewModel);

  @override
  Widget build(BuildContext context) 
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width,
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              splashColor: kSplashColor,
              onTap: () ,
              child: Align(
                alignment: Alignment.centerLeft,
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                  child: Text(
                    viewModel.title,
                    style: TextStyle(
                        fontWeight: FontWeight.w600,
                        color: Colors.black54,
                        fontSize: 30),
                  ),
                ),
              ),
            ),
          ),
          decoration: BoxDecoration(
              color: viewModel.titleBackgroundColor ?? Colors.amber),
        ),
        Container(
          color: Colors.red,
          child: ListView.builder(
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            itemCount: viewModel.data?.length ?? 0,
            itemBuilder: (BuildContext context, int index) 
              var data = viewModel.data;
              if (data.isNotEmpty) return viewModel.data[index];
            ,
          ),
        )
      ],
    );
  


class SectorViewModel 
  String title;
  Color titleBackgroundColor;
  List<Widget> data;

  SectorViewModel(this.title, this.titleBackgroundColor, this.data);

【参考方案1】：

当我正确理解您时，您希望根 Column 小部件与其子部件的大小相匹配。为此，只需传入mainAxisSize: MainAxisSize.min（默认为MainAxisSize.max - 我也觉得这有点烦人，但无论如何。）

另外：子容器中不需要width: MediaQuery.of(context).size.width,.. 只需告诉父 Column() 拉伸它的子交叉轴：crossAxisAlignment: CrossAxisAlignment.stretch。

【讨论】：

它不起作用。我必须设置包装列表视图的容器的高度。该列适合此容器的相同大小，但我需要此容器具有与其列表视图屏蔽相同的大小，因为我不知道此列表视图的子项的大小。

好吧，我想我终于明白你在问什么了.. 但我仍然不确定它应该如何工作.. 你在 ListView 懒惰地创建孩子.. @987654328 怎么样@ 应该知道尚未创建的孩子的身高？

是的，也许这不可能。但是，如果我设置列表视图的高度（通过容器），有没有办法让每个项目完全适合列表视图的单元格，保持纵横比？

看看AspectRatio 小部件docs.flutter.io/flutter/widgets/AspectRatio-class.html .. 如果这不能解决您的问题，也许可以提供更多详细信息。

我已经尝试过使用纵横比，但我无法让它按照我想要的方式工作。