Question

我正在尝试在Flutter应用中实现列表。这是我的身体：

Container(
    padding: EdgeInsets.fromLTRB(35.0, 40.0, 0.0, 0.0),
    child: Column(
      children: <Widget>[
        Text(
          date,
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 30.0,
            color: Colors.teal,
            fontWeight: FontWeight.bold,
            fontFamily: 'Montserrat'),
        ),
        SingleChildScrollView(
          child: ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemCount: people.length,
          itemBuilder: (BuildContext context, int index){
            return Card(
              color: Colors.white,
              child: Padding(
                padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 6.0),
                child: Center(
                  child: ListTile(
                    onTap: () => {},
                    title: Text(
                      "Name: "+people[index]['name'],
                      style: TextStyle(
                        color: Colors.teal,
                        fontWeight: FontWeight.bold,
                        fontFamily: 'Montserrat',
                        fontSize: 21
                        ),
                      ),
                    subtitle: Text(
                      "Phone number: "+people[index]['phone'],
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontFamily: 'Montserrat',
                        fontSize: 16
                      ),
                    ),
                  )
                ) 
              ),
            );
            },
        ),
        )  
      ],
    )
),

如您所见，我正在用作身体的根小部件。此容器具有一个列子项，该子项包括一个文本（该文本是页面的页眉）和一个SingleChildScrollView，它将帮助列表变得可滚动。我期望得到一个可以滚动浏览的列表，但底部却溢出了。任何帮助，将不胜感激。谢谢。

Answer 1

将Lisview包裹在装有SingleChildScrollView的扩展小部件中

onTap

您需要这样做，因为ListView会占用所有可用空间，因此，为了限制其大小（宽度n高），您需要将其包装在Expanded小部件中。

仅供参考，return MdListTile( onTap: () { widget.updateAppBarTitle(navigationItems[counter].title); //Other methods }, isSelected: currentSelectedIndex == counter, title: navigationItems[counter].title, icon: navigationItems[counter].icon, animationController: _animationController, );小部件仅在列或行内可用

Answer 2

在扩展窗口小部件中包装Listview

Expanded(
child: ListView.builder()
 )

或使用容器并设置高度和宽度

Answer 3

使用SingleChildScrollView作为根窗口小部件。例如：

@override
Widget build(BuildContext context) {
  return SingleChildScrollView(
    child : Container(....)
  );
}

即使使用singleChildScrollView LIstview.bulder，底部也会溢出

3 个答案: