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

Question

我有这个 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});
}

Answer 1

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

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