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

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 中的 shr​​inkWrap = true。

否则 children 将不知道在可滚动小部件中占用多少空间。