RESOLVED RESOLVED RESOLVED RESOLVED RESOLVED

问题下的两个答案都是正确的,下面的帖子中有最后的修订.

我试图创建可滚动的帖子列表,但我得到的是静态的不可滚动的字符串,这是溢出的.

  1. 例子:

  1. Oveflow:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: _writePost,
          tooltip: 'Increment',
          child: Icon(Icons.create, color: Colors.grey[300]),
        ),
        body: SizedBox(
            child: Container(
                child: Column(children: [
          StreamBuilder<List<Post>>(
            initialData: const [],
            stream: _socketStream.stream,
            builder: (context, snapshot) {
              if (_isLoading) {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              }
               ListView(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                children: [
                  ...snapshot.data!.map<Widget>(
                    (post) => Padding(
                      key: ValueKey(post.id),
                      padding: const EdgeInsets.symmetric(vertical: 10),
                      child: ListTile(
                        title: Text(
                          post.content,
                          style: const TextStyle(fontSize: 20),
                        ),
                        trailing: MaterialButton(
                          onPressed: () {
                            _deletePost(post.id);
                          },
                          child: const Icon(
                            Icons.delete,
                            size: 30,
                          ),
                        ),
                      ),
                    ),
                  )
                ],
              );
            },
          ),
        ]))));
  }

Edited code, which is scrolling

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: _writePost,
          tooltip: 'Increment',
          child: Icon(Icons.create, color: Colors.grey[300]),
        ),
        body: SizedBox(
          height: 500, 
          child:
              StreamBuilder<List<Post>>(
            initialData: const [],
            stream: _socketStream.stream,
            builder: (context, snapshot) {
              if (_isLoading) {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              }
              return Card(child: ListView(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                children: [
                  ...snapshot.data!.map<Widget>(
                    (post) => Padding(
                      key: ValueKey(post.id),
                      padding: const EdgeInsets.symmetric(vertical: 10),
                      child: ListTile(
                        title: Text(
                          post.content,
                          style: const TextStyle(fontSize: 20),
                        ),
                        trailing: MaterialButton(
                          onPressed: () {
                            _deletePost(post.id);
                          },
                          child: const Icon(
                            Icons.delete,
                            size: 30,
                          ),
                        ),
                      ),
                    ),
                  )
                ],
               ) );
            },
          ),
        ));
  }

我试图找出文档中的错误,但是...

推荐答案

ColumnListview取最大可用高度.因此,Listview的高度(此处为列的子级)应该受到约束.您可以将ListView包装在Expanded中:

child: Column(
        children: [
          Expanded(
            child: ListView(

此外,如果列表很长,建议不要将shrinkwrap设置为true.因为它使ListView在构建布局时加载其所有项.所以它会降低性能.

Flutter相关问答推荐

如何使用新的Riverpod语法将依赖传递给AsyncNotifier?

自定义ItemBuilderFlutter

Flutter 中的多页表现

Flutter BLoC et workmanager:如何创建独特的仓库初始化模式?

带有图标抖动的自定义下拉按钮

GitHub Actions工作流secret中的特殊字符未被保留

参数类型';List<;Dynamic&>不能分配给参数类型';List<;SingleChildWidget&>';

在创建显示此错误的Flutter 深度链接时

顶部对齐ListTile的[前导、标题、尾随]小部件

Flutter 中的 setState() 内部是如何工作的?

Flutter中不使用Container是否可以做margin

如何在Flutter中的textField中在可编辑文本和前缀图标之间添加空格?

如何使用Riverpod提供程序正确构建搜索栏?

Firestore 使用 Flutter 以奇怪的格式保存数据

像图像一样Flutter 自定义标签

如何在 Flutter 中滚动时为多个小部件设置动画

从物理设备 Flutter 中移除 USB 后启动画面不可见?

构建失败 - 无法解析 io.grpc:grpc-core:[1.28.0]. (是的,我已经升级到 mavenCentral())

使用 hydrad_bloc 的预览包

如何做到这一点,当我们在 textified 中输入 ab 然后将 applebanana 显示为一个单词?飘飘然