在單個子滾動視圖中，底部溢出了 61 個像素的 RenderFlex

Question

我有一個屏幕，我想動態插入一些復選框，但在這個例子中我固定了三個只是為了測試。 這是代碼：

Expanded(
  flex: 3,
  child: Padding(
    padding: EdgeInsets.all(10),
    child: Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: AppColorSecondary,
        ),
        borderRadius: BorderRadius.all(Radius.circular(20))
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(i.description, textAlign: TextAlign.center,style: TextStyle(fontWeight: FontWeight.bold),),
          SizedBox(height: 3,),
          Text("Cod: ${i.code}", textAlign: TextAlign.center,),
          Divider(),
          Text("R\$ ${i.value.toString()}"),
          SingleChildScrollView( // the error is here
            child: Column(
              children: [
                CheckboxListTile(
                  title: Text("AA"),
                  value: true,
                ),
                CheckboxListTile(
                  title: Text("AA"),
                  value: true,
                ),
                CheckboxListTile(
                  title: Text("AA"),
                  value: true,
                ),
              ],
           ),
       ),],
        ),
      padding: EdgeInsets.all(10),
))),

運行它，它會拋出這個錯誤：

一個 RenderFlex 在底部溢出了 61 個像素。

我只是想讓它可以滾動以顯示所有復選框。 我究竟做錯了什么？

Answer 1

這是因為您將SingleChildScrollView與Column嵌套

你需要做的是給SingleChildScrollView一個固定高度的父容器

否則它應該放置在 flex 小部件中，例如Expanded或flexible ，這將在場景后面提供固定高度，但取決於 colmun/row 中的其他項目

Answer 2

用 Expanded 包裝 SingleChildScrollView，因為它位於列內，以便獲取列中剩余的最大空間

Expanded(
 child:SingleChildScrollView(
  child:Column(
   children:[
     CheckboxListTile(
      title: Text("AA"),
      value: true,
     ),
     CheckboxListTile(
      title: Text("AA"),
      value: true,
     ),
     CheckboxListTile(
      title: Text("AA"),
      value: true,
     ),
   ]
  )
 )
)