Flutter Gridview 構建器不適用於列

Question

這是我的文件，Gridview 不工作它向我顯示了唯一的錯誤...

我正在為該列使用多個子項，需要在此處使用 gridview 生成器。

此外，我嘗試使用 Stack 並刪除了該列並且它有效但在那種情況下，我需要為每個部分使用大量填充並且毫無價值。

Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBarComponent(),
    drawer: new Drawer(child: DrawerList()),
    body: Container(
      color: Colors.black12.withOpacity(0.02),
        child: Column(
          children: <Widget>[
            Container(
              child: Row(
                children: <Widget>[
                  Form(
                    key: formKey,
                    child: Container(
                      width: 280.0,
                      height: 40.0,
                      child: TextFormField(
                        onSaved: (val) => keyword = val,
                        validator: this._validateKeyword,
                        decoration: new InputDecoration(
                          hintText: "Search Product",
                          fillColor: Colors.white,
                          filled: true,
                          contentPadding: new EdgeInsets.all(12.0),
                        ),
                      ),
                    ),
                  ),
                  ButtonTheme(

                    minWidth: 6.0,
                    height: 40.0,

                    child: RaisedButton(
                      color: Colors.redAccent.withOpacity(0.9),

                      onPressed: _search,
                      child: Icon(Icons.search,color:Colors.white,size: 26.0),
                    ),
                  ),
                ],
              ),
            ),
            Padding(padding: new EdgeInsets.only(top: 12.0)),
            Container(
              color: Colors.white,
              height: 40.0,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Icon(Icons.assignment_turned_in,color: Colors.greenAccent,),

                  Padding(
                    padding: const EdgeInsets.only(left: 4.0,right: 8.0),
                    child: Text("SEARCH RESULT",style: TextStyle(fontSize:14.0,fontWeight: FontWeight.w500),),
                  ),
                  Padding(padding: EdgeInsets.only(left: 12.0)),
                  ButtonTheme(
                    height: 24.0,
                    child: RaisedButton(
                      padding: const EdgeInsets.all(6.0),
                      onPressed:()=>print("a"),
                      child: new Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(right: 6.0),
                            child: Icon(Icons.filter,size: 16.0,),
                          ),
                          Text('FILTER',style: TextStyle(fontSize: 12.0),),
                        ],
                      ),
                    ),
                  ),
                  Padding(padding: EdgeInsets.only(left: 10.0)),
                  ButtonTheme(
                    height: 24.0,
                    child: RaisedButton(
                      onPressed:()=>print("a"),
                      padding: const EdgeInsets.all(6.0),
                      child: new Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(right: 6.0),
                            child: Text('SORT BY',style: TextStyle(fontSize: 12.0),),
                          ),
                          Icon(Icons.keyboard_arrow_down,size: 16.0,),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),

            Expanded(
                child: new GridView.builder(

                  itemCount: 10,
                  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                  itemBuilder: (BuildContext context, int index) {



                    return Container(
                      child: Card(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Padding(
                              padding: const EdgeInsets.only(top: 8.0),
                              child: Image.asset('images/product-1.png',width: 100.0),
                            ),
                            Container(
                              color: Colors.black12.withOpacity(0.02),
                              height: 55.0,
                              child: Column(
                                children: <Widget>[
                                  Padding(
                                    padding: const EdgeInsets.only(left: 4.0),
                                    child: Container(
                                      child: Text("It is a long established fact that a readerIt is a long established fact that a reader.",
                                          overflow: TextOverflow.ellipsis,
                                          style: TextStyle(fontSize: 14.0)),
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(top:8.0,left: 4.0),
                                    child: Row(
                                      children: <Widget>[
                                        Text("\$57 ",style: TextStyle(fontSize:12.0,color: Colors.red,fontWeight: FontWeight.bold),),
                                        Text(" \$57",style: TextStyle(fontSize:12.0,decoration: TextDecoration.lineThrough),),
                                        Padding(
                                          padding: const EdgeInsets.only(left: 4.0),
                                          child: ButtonTheme(

                                            minWidth: 8.0,
                                            height: 8.0,

                                            child: RaisedButton(
                                              color: Colors.white.withOpacity(0.9),

                                              onPressed: null,
                                              child: Icon(Icons.shopping_cart,size: 18.0),
                                            ),
                                          ),
                                        ),

                                        Padding(
                                          padding: const EdgeInsets.only(left: 1.0),
                                          child: ButtonTheme(

                                            minWidth: 8.0,
                                            height: 8.0,

                                            child: RaisedButton(
                                              color: Colors.white.withOpacity(0.9),

                                              onPressed: null,
                                              child: Icon(Icons.favorite,size: 18.0),
                                            ),
                                          ),
                                        ),


                                      ],
                                    ),
                                  )
                                ],
                              ),

                            ),



                          ],

                        ),
                      ),
                    );



                  },
                ),
              ),
          ],
        ),
    )
);

}

Answer 1

我試過你的代碼片段，我得到的唯一錯誤是小部件的 UI 溢出錯誤。

解決此問題的一種方法是在 Column 的子控件上使用Expanded控件。 它看起來與此類似。

Container(
  child: Column(
    children: <Widget>[
      Expanded(
        child: Text(),
      ),
      Expanded(
        Row(
          children: <Widget>[
            Text(),
            Text(),
            Button(),
            Button(),
          ],
        ),
      ),
    ],
  ),
)

添加后，ListView 項目將如下所示。