撲。列mainAxisAlignmentspaceBetween在Row內不起作用

我正在嘗試制作這樣的螢屏：

為此，我將 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，但傳入的高度約束是無界的。

當一列位于不提供有限高度約束的父列中時，例如，如果它在垂直可滾動中，它將嘗試沿垂直軸收縮包裹其子項。對子項設定 flex（例如使用 Expanded）表示子項將擴展以填充垂直方向上的剩余空間。這兩個指令是互斥的。如果父級要收縮包裹其子級，則子級不能同時展開以適合其父級。

考慮將 mainAxisSize 設定為 MainAxisSize.min 并為靈活的孩子使用 FlexFit.loose 擬合（使用靈活而不是擴展）。這將允許靈活的孩子將自己的大小調整為小于他們將被迫占用的無限剩余空間，然后將導致 RenderFlex 收縮包裹孩子而不是擴展以適應父母提供的最大約束。

當我洗掉 Expanded() 和 Spacer() 時，錯誤沒有。但我有錯誤的看法。見圖：

請幫助我我做錯了什么（

uj5u.com熱心網友回復：

您可以使用

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

標籤：扑 镖 颤动小部件 扑卡 颤振柱

上一篇：如何將函式結果寫入實體變數

下一篇：我怎樣才能在顫動/飛鏢中分割一個圓圈并使其視覺上相等？