Question

我在使用ListView.Builder小部件显示结果时遇到问题。无论我做什么，当我将它放在main.dart页面上时，该页面会不断出现渲染错误。我立即将其放在单独的页面中，它正确显示而没有错误。没有listView.builder，页面（main.dart）完美显示，没有任何错误。我的问题是是否可以在同一页面上同时显示ListView.Builder和其他小部件，还是必须将其显示在单独的页面上？任何帮助将不胜感激。

body: TabBarView(
            children: <Widget>[
              SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    Container(
                      // child: SingleChildScrollView(
                      // scrollDirection: Axis.vertical,
                      child:Container(
                        child: Column(
                          //crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Container(

                                  child:Expanded(
                                    child: Image.asset("assets/images/1frenchToast.webp"),
                                  ),
                                ),
                              ],
                            ),

                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: <Widget>[
                                Text("Select Cuisine",style: TextStyle(color: Colors.black),),
                                GestureDetector(
                                  child: DropdownButton(
                                    //isDense: true,
                                    style: TextStyle(fontSize: 14,color: Colors.black,),
                                    value: dropDownSelectedItemState,
                                    items: items,
                                    onChanged: (String selectValue){
                                      ClassHub().mySharedPreference("cuisineChoice", "set", selectValue);

                                      ClassHub().getFoodCategory(selectValue).then((onValue){
                                        if(onValue !=null){
                                          setState(() {
                                            foodCategory = onValue;
                                          });
                                        }
                                      });
                                      setState(() {
                                        dropDownSelectedItemState = selectValue;
                                      });
                                    },
                                  ),
                                  onLongPress: (){

                                  },
                                ),
                              ],
                            ),

 // This is the portion causing issues
                            Column(
                              //mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: <Widget>[

                                //myListView(),

                               Container(
                                 child: ListView.builder(scrollDirection: Axis.vertical,
                                  itemCount: foodCategory.length
                                  itemBuilder: (context,index){
                                    return ListTile(
                                      title: Text(foodCategory[index].foodType),
                                    );
                                  },
                                ),
                            ),

                              ]
                            ),
                            Container(
                              //height: 20,
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: <Widget>[
                                Container(
                                  margin: EdgeInsets.only(top: 20,),
                                  height: 60,
                                  width: MediaQuery.of(context).size.width-20,
                                  child: ListTile(
                                    leading: CircleAvatar(
                                      minRadius: 10,
                                      maxRadius: 30,
                                          //child:Image.asset("assets/images/Capture.JPG",height: 60,width: 60,),
                                      //borderRadius: BorderRadius.circular(30),
                                      backgroundImage: ExactAssetImage('assets/images/Capture.JPG'),
                                    ),
                                    title: Text("Western Food Recipes"),
                                  ),
                                ),
                              ],
                            ),
                            Container(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: <Widget>[
                                Container(
                                  height: 60,
                                  width: MediaQuery.of(context).size.width-20,
                                  child:ListTile(
                                    leading: Image.asset("assets/images/Capture.JPG"),
                                     // borderRadius: BorderRadius.circular(30),
                                   // ),
                                    title: Text("African Food Recipes"),
                                  ),
                                ),

                              ],
                            ),
                            Container(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: <Widget>[
                                Container(
                                  height: 60,
                                  width: MediaQuery.of(context).size.width-20,
                                  child:ListTile(
                                    leading: Image.asset("assets/images/Capture.JPG"),
                                    // borderRadius: BorderRadius.circular(30),
                                    // ),
                                    title: Text("African Food Recipes"),
                                  ),
                                ),

                              ],
                            ),
                          ],
                        ),
                      ),

                      // ),
                    ),
                  ],
                ),
              ),

我希望能够在没有任何渲染错误的情况下将ListView.Builder小部件与其他小部件显示在同一页面上。这可能吗？

Answer 1

您需要的是ListView.builder中的shrinkWrap = true。

否则，孩子们将不知道要在可滚动小部件中占用多少空间。

Answer 2

您必须通过builder_context并使用ListView.Builder这个功能可能对您有帮助

是否必须将ListView.Builder小部件放置在单独的页面上

2 个答案: