如何使用列表视图将小部件约束到其子级的大小？

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。