如何在Flutter中显示两个ReorderableGridView的单个滚动视图

Question

我在页面中有两个 ReorderableGridView （来自此包 ReoderableGrid 视图）

喜欢这些

Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (pinnedNotes.isNotEmpty) ...[
              const Padding(
                padding: EdgeInsets.fromLTRB(20.0, 0.0, 0.0, 0.0),
                child: Text(
                  'Pinned Notes',
                  style: TextStyle(fontWeight: FontWeight.normal),
                ),
              ),
              Expanded(
                child: ReorderableGridView.count(
                  padding: const EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 0.0),
                  crossAxisCount: crossAxisCount,
                  childAspectRatio: (itemWidth / itemHeight),
                  mainAxisSpacing: 10,
                  crossAxisSpacing: 10,
                  onReorder: (oldIndex, newIndex) {
                   
                  },
                  children: pinnedNotes.map((note) {
                    return NoteCard(
                      key: ValueKey(
                          note.id), 
                      note: note,
                      deleteNote: _deleteNote,
                      togglePinnedStatus: togglePinnedStatus,
                    );
                  }).toList(),
                ),
              ),
            ],
            const SizedBox(
              height: 14.0,
            ),
            if (unpinnedNotes.isNotEmpty) ...[
              const Padding(
                padding: EdgeInsets.fromLTRB(20.0, 0.0, 0.0, 0.0),
                child: Text(
                  'All Notes',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Expanded(
                child: ReorderableGridView.count(
                  padding: const EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 0.0),
                  crossAxisCount: crossAxisCount,
                  childAspectRatio: (itemWidth / itemHeight),
                  mainAxisSpacing: 10,
                  crossAxisSpacing: 10,
                  onReorder: (oldIndex, newIndex) {
                    
                  },
                  children: unpinnedNotes.map((note) {
                    return NoteCard(
                      key: ValueKey(
                          note.id), 
                      note: note,
                      deleteNote: _deleteNote,
                      togglePinnedStatus: togglePinnedStatus,
                    );
                  }).toList(),
                ),
              ),
              const SizedBox(
                height: 14.0,
              )
            ],
          ],
        ),
      )

这会创建两个可滚动列表。但我想要一个可滚动列表，首先显示固定的注释，然后显示未固定的注释。然后我按照这个答案告诉如何为 GridView 小部件 Link 执行此操作，然后我有了这段代码，但现在应用程序冻结了，根本不交互并且什么也不显示。

SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (pinnedNotes.isNotEmpty) ...[
              const Padding(
                padding: EdgeInsets.fromLTRB(20.0, 0.0, 0.0, 0.0),
                child: Text(
                  'Pinned Notes',
                  style: TextStyle(fontWeight: FontWeight.normal),
                ),
              ),
              ReorderableGridView.count(
                padding: const EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 0.0),
                crossAxisCount: crossAxisCount,
                childAspectRatio: (itemWidth / itemHeight),
                physics: const NeverScrollableScrollPhysics(),
                mainAxisSpacing: 10,
                crossAxisSpacing: 10,
                onReorder: (oldIndex, newIndex) {
                  
                },
                children: pinnedNotes.map((note) {
                  return NoteCard(
                    key: ValueKey(
                        note.id), 
                    note: note,
                    deleteNote: _deleteNote,
                    togglePinnedStatus: togglePinnedStatus,
                  );
                }).toList(),
              ),
            ],
            const SizedBox(
              height: 14.0,
            ),
            if (unpinnedNotes.isNotEmpty) ...[
              const Padding(
                padding: EdgeInsets.fromLTRB(20.0, 0.0, 0.0, 0.0),
                child: Text(
                  'All Notes',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              ReorderableGridView.count(
                padding: const EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 0.0),
                crossAxisCount: crossAxisCount,
                childAspectRatio: (itemWidth / itemHeight),
                physics: const NeverScrollableScrollPhysics(),
                mainAxisSpacing: 10,
                crossAxisSpacing: 10,
                onReorder: (oldIndex, newIndex) {
                  
                },
                children: unpinnedNotes.map((note) {
                  return NoteCard(
                    key: ValueKey(
                        note.id), 
                    note: note,
                    deleteNote: _deleteNote,
                    togglePinnedStatus: togglePinnedStatus,
                  );
                }).toList(),
              ),
              const SizedBox(
                height: 14.0,
              )
            ],
          ],
        ),
      );

Answer 1

我必须在第二个代码中向 Reorderable.count() 添加一个属性

shrinkWrap: true