Flutter - 可滚动页面中的列表视图

Posted 2023-02-23

【中文标题】Flutter - 可滚动页面中的列表视图

【英文标题】：Flutter - Listview in scrollable Page

【发布时间】：2020-07-16 12:46:42

【问题描述】：

我想建立一个可滚动的页面，列出不同的小部件（在列表视图中）。基本上，我的想法是进行以下设置：

SingleChildScrollView(容器(列(... Expanded(ListView)))))

但这仅适用于容器的固定高度。有没有办法根据列表视图显示的小部件数量动态改变容器的高度？

PS：我使列表视图不可滚动，因为整个页面已经可以通过 SingleChildScrollView 滚动。

希望有人可以在这里提供帮助。

提前非常感谢， 尼古拉斯

代码：

class _ProfileState extends State<Profile> 
  @override
  Widget build(BuildContext context) 
    return SingleChildScrollView(
          child: Container(height: 2000, child:
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(child: PostList()),
],),),);

还有：

class _PostListState extends State<PostList> 
  @override
  Widget build(BuildContext context)     
    final postData = Provider.of<List<PostData>>(context) ?? [];    
    if (postData != null) 
      return ListView.builder(
        physics: const NeverScrollableScrollPhysics(),
        itemCount: postData.length,
        itemBuilder: (context, index) 
          return PostTile (postData: postData[index]);
        ,);
     else 
      return Text('loading'); // Check if necessary

【问题讨论】：

尝试在这里发布更多代码，不清楚是什么导致了您提到的问题。

你也可能不需要 ListView ，你可以简单地使用另一列来完成相同的操作。所以按照你的结构：SingleChildScrollView (Container (Column (... Column(...your widgets...))))

非常感谢您的快速响应。我添加了上面的代码 - 设置高度为 2000，我想根据 PostList 小部件的高度动态设置它。

【参考方案1】：

为了完成您在此处查找的内容，您可能应该将Listiew 更改为Column 并删除Container。

类似这样的：

class _ProfileState extends State<Profile> 
  @override
  Widget build(BuildContext context) 
    return SingleChildScrollView(
          child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
           PostList(),
],),);

class _PostListState extends State<PostList> 
  @override
  Widget build(BuildContext context)     
    final postData = Provider.of<List<PostData>>(context) ?? [];    
    if (postData != null) 
      return Column(
        children: ...postData.map((el) => PostTile (postData: el))
      );
     else 
      return Text('loading'); // Check if necessary

【讨论】：

您好，感谢您的回答。它给了我一个错误，但是当您在上面编写的第一个代码中删除 Expanded() 时，它可以工作。非常感谢！

抱歉，我没有实际测试代码 :) 乐于提供帮助

【参考方案2】：

如果您想要一个不同ListView 的列表，请尝试将shrinkWrap: true 放在您所有的listView 孩子中，然后将physics 添加到其中。

ListView(
    shrinkWrap: false,
    physics: ClampingScrollPhysics(),
    children: <Widget>[
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListView.builder(
            itemCount: 3,
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            itemBuilder: (context, index) 
              return ListTile(
                  title: Text(
                'Item #$index',
              ));
            ,
          ),
          ListView.builder(
            itemCount: 6,
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            itemBuilder: (context, index) 
              return ListTile(
                  leading: Icon(Icons.settings),
                  title: Text(
                    'SecondItem #$index',
                  ));
            ,
          ),
          ListView.builder(
            itemCount: 6,
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            itemBuilder: (context, index) 
              return ListTile(
                  dense: false,
                  trailing: Icon(Icons.settings),
                  title: Text(
                    'THIRD ITEM #$index',
                  ),
                  subtitle: Text(
                    'This is third item number $index',
                  ));
            ,
          ),
        ],
      ),
    ],
  )