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,獲得期望的結果，然后對於Rows的子級可以使用Flexible或Exapnded小部件包裝。

 @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"),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }