flutter - 扑。列 mainAxisAlignment spaceBetween 在 Row 内不起作用

Question

我正在尝试制作这样的屏幕：

为此，我将 ListView 与自定义项目一起使用。这是我的项目代码：

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(10),
        child: Card(
          elevation: 5,
          color: Colors.greenAccent,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(
                      width: 65,
                      height: 65,
                      child: ClipRRect(
                          borderRadius: BorderRadius.circular(8),
                          child: Image.asset(
                            "assets/images/temp.png",
                            alignment: Alignment.center,
                          )),
                    ),
                    const SizedBox(width: 18),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: const [
                              Text(
                                "Test title",
                                textAlign: TextAlign.left,
                                style: TextStyle(
                                    color: Colors.red,
                                    fontSize: 17,
                                    fontWeight: FontWeight.w500),
                              ),
                              Text(
                                "TestDescription",
                                style: TextStyle(
                                    color: Colors.deepOrangeAccent,
                                    fontSize: 15,
                                    fontWeight: FontWeight.w700),
                              ),
                            ],
                          ),
                          Spacer(),
                          CustomButton(
                            onPressed: () {},
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ));
  }

我需要将标题和描述对齐到顶部，并在底部自定义底部。为此，我在 Column 内使用 Spacer() 并用 Expanded 小部件包装了我的 Column。但是当我用 Expanded 包装我的小部件时，我得到如下错误：

RenderFlex 子项具有非零弹性，但传入的高度约束是无界的。

当列位于不提供有限高度约束的父级时，例如，如果它位于垂直可滚动中，它将尝试沿垂直轴收缩包裹其子级。在一个子节点上设置一个 flex（例如使用 Expanded）表示该子节点将展开以填充垂直方向上的剩余空间。这两个指令是互斥的。如果父级要收缩包裹其子级，则子级不能同时扩展以适应其父级。

考虑将 mainAxisSize 设置为 MainAxisSize.min 并为灵活的子项使用 FlexFit.loose（使用 Flexible 而不是 Expanded）。这将允许灵活的子级将自己的大小调整为小于他们将被迫占用的无限剩余空间，然后将导致 RenderFlex 收缩包裹子级，而不是扩展以适应父级提供的最大约束。

当我删除 Expanded() 和 Spacer() 时，错误号。但我得到错误的看法。看图片：

请帮助我做错了什么（

Answer 1

您可以使用IntrinsicHeight作为父级Row来获得期望的结果crossAxisAlignment: CrossAxisAlignment.stretch,，然后 for的子级可以使用或小部件Rows包装。FlexibleExapnded

 @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Card(
        elevation: 5,
        color: Colors.greenAccent,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: IntrinsicHeight(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Flexible(
                  // or exapnded
                  // fit: FlexFit.tight,
                  flex: 1,
                  child: Container(
                    height: 65,
                    width: 64,
                    color: Colors.amber,
                    child: Text("Image"),
                  ),
                ),
                Flexible(
                  flex: 1,
                  fit: FlexFit.tight,
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Text("Item 1"),
                          Text("Item 2"),
                        ],
                      ),
                      Text("Item b x"),
                    ],
                  ),
                ),
                Flexible(
                  flex: 1,
                  // fit: FlexFit.tight,
                  child: Container(
                    color: Colors.cyanAccent,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: const [
                        Text("lT"),
                        Text("lBsssssssssssss"),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }