垂直视口被赋予了无限的高度。 RenderBox 未布置：RenderViewport#34d12 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UP

Posted 2023-02-23

【中文标题】垂直视口被赋予了无限的高度。 RenderBox 未布置：RenderViewport#34d12 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

【英文标题】：Vertical viewport was given unbounded height. RenderBox was not laid out: RenderViewport#34d12 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

【发布时间】：2021-05-27 19:38:39

【问题描述】：

我无法使用listview.builder 列出我的数据。

视口沿滚动方向扩展以填充其容器。在这种情况下，垂直视口被赋予了无限量的垂直空间来扩展。当一个可滚动小部件嵌套在另一个可滚动小部件中时，通常会发生这种情况。 如果此小部件始终嵌套在可滚动小部件中，则无需使用视口，因为总会有足够的垂直空间供子项使用。在这种情况下，请考虑改用 Column。否则，请考虑使用“shrinkWrap”属性（或 ShrinkWrappingViewport）将视口的高度调整为其子项的高度之和。

如何在listview 中使用listview.builder？

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:hexcolor/hexcolor.dart';
class Profil extends StatefulWidget 
  @override
  _ProfilState createState() => _ProfilState();

class _ProfilState extends State<Profil> 
  final List<String> entries = <String>['Privacy', 'Purshase History', 'Help & Support','Settings','Invite a Friend'];
  final  List<Icon> iconsImage =
  [Icon(Icons.privacy_tip),
    Icon(Icons.history),
    Icon(Icons.help),
    Icon(Icons.settings),
  Icon(Icons.person_add_alt)
  ];
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title:Text("Profilim",style: TextStyle(fontSize: 20),),backgroundColor: HexColor("#0e2d85"),actions: [
        Container(padding: EdgeInsets.only(right: 15),child: Icon(Icons.exit_to_app)),
      ],),
      body: Container(
        child: Padding(
          padding: const EdgeInsets.only(top:10.0,right: 10),
          child: Column(
            children: [
              Column(children: [
                Row( mainAxisAlignment:MainAxisAlignment.end,children:[IconButton(icon: Icon(FontAwesomeIcons.highlighter), onPressed: ())] ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 12),
                  child: Row(
                    children: [
                      Stack(children: [
                        Container(
                          height: 150,
                          width: 150,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(80),
                            image: DecorationImage(image: AssetImage("assets/BG.jpg"),fit: BoxFit.cover),
                          ),
                        ),
                              Positioned(
                                  top: 125,
                                  left: 120,
                                  child: Container(
                                    child: CircleAvatar(
                                      child: Icon(
                                        Icons.edit,
                                        color: Colors.yellow,
                                        size: 15,
                                      ),
                                    ),
                                  )),
                      ],
                      ),
                      SizedBox(width: 30,),
                      Column(
                        children: [
                          Text("Salih"),
                          SizedBox(height: 10,),
                          Text("[e-mail]"),
                          SizedBox(height: 10,),
                          Container(width:200,child: RaisedButton(onPressed: (), color:Colors.yellow[200],child: Text("Upgrade to PRO",style: TextStyle(color: Colors.black),),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),))
                        ],
                      )
                    ],
                  ),
                )
              ],
              ),
        ListView.builder(
            padding: const EdgeInsets.all(8),
            itemCount: 2,
            itemBuilder: (BuildContext context, int index) 
              return Container(
                height: 20,
                child: Center(child: Text('Entry $entries[index]')),
              );
            
        ),
            ],
          ),
        ),
      )
    );
  

【参考方案1】：

您可以将Listview.builder 包裹在Expanded 小部件中，让listview 占用Column 的上述内容之后留下的空间。 但同样，它只会占用 Column 的上述内容之后留在页面上的高度，并且只会在该空间中滚动！