ListView不會將物件與檔案分開

已 解決已解決 已解決 已 解決 已 解決

問題下的兩個答案都是正確的，帖子下面有一個最終的編輯。

我正在嘗試創建可滾動的帖子串列，但我得到了靜態的不可滾動的字串塊，它溢位了。

1. 例子：

2. 溢位：

  @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,
                          ),
                        ),
                      ),
                    ),
                  )
                ],
              );
            },
          ),
        ]))));
  }

編輯后的代碼，正在滾動

  @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,
                          ),
                        ),
                      ),
                    ),
                  )
                ],
               ) );
            },
          ),
        ));
  }

我試圖找出檔案中的錯誤，但是...如果您需要更多代碼或解釋，請寫信如果可以<3請幫助我

uj5u.com熱心網友回復：

Column并Listview取最大可用高度。因此，此處是 Column 的子項的 Listview 的高度應該受到限制。您可以通過將 ListView 包裝在里面來做到這一點Expanded：

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

此外，如果您的串列很長，則不建議設定shrinkwrap為 true。因為它會在ListView構建布局時加載其所有專案。所以它會降低性能。

uj5u.com熱心網友回復：

@override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: _writePost,
          tooltip: 'Increment',
          child: Icon(Icons.create, color: Colors.grey[300]),
        ),
        body: SizedBox(
           height: MediaQuery.of(context).height*0.8,  // add this line 
            child: 
          // Container(        // do not need this
          //                   child:   // and this do not need    
          // Column(children: [      // and this do not need 
          StreamBuilder<List<Post>>(
            initialData: const [],
            stream: _socketStream.stream,
            builder: (context, snapshot) {
              if (_isLoading) {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              }
               ListView(  // change this to ListView.builder for more performance
                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,
                          ),
                        ),
                      ),
                    ),
                  )
                ],
              );## Heading ##
            },
          ),
       // ]) // comment this
       // ).  // and comment this
     )
   );
  }

標籤：扑 用户界面 列表显示

上一篇：將WPFListViewGridViewColumn的值作為命令引數傳入

下一篇：Tabview滾動行為