用于空值的空检查运算符 - StaggeredGridView

Question

我正在开发一个'Notes'应用程序。

到目前为止，它有一个 HomeScreen() 和 Note() 小部件。第一个是要显示笔记的屏幕，第二个是自定义小部件，它会根据笔记的显示方式进行扩展。我正在使用 Card() 来显示每个注释。

要动态设置卡片的大小，我使用的是StaggeredGridView。

这是我的代码。notesList 是注释数组。

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get_it/get_it.dart';

import '../models/notes_list.dart';
import '../services/notes_service.dart';
import '../note.dart';
import './add_note_screen.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  NotesService get service => GetIt.I<NotesService>();
  List<NotesList> notesList = [];

  @override
  void initState() {
    notesList = service.getNotes();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: notesList.length == 0
          ? AppBar(title: Text('Create a Note'))
          : AppBar(title: Text('Safe')),
      body: StaggeredGridView.builder(
        padding: EdgeInsets.all(10),
        itemCount: notesList.length,
        gridDelegate: SliverStaggeredGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          staggeredTileBuilder: (index) => StaggeredTile.fit(1),
        ),
        itemBuilder: (_, index) => Note(
          notesList[index].noteTitle,
          notesList[index].noteContent,
          notesList[index].noteDateTime,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () => Navigator.push(
            context, MaterialPageRoute(builder: (_) => AddNoteScreen())),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
    );
  }
}

我只想在屏幕上显示 2 条笔记，借助上面的代码，我能够实现。

我已经面临的一个问题是 StaggeredGridView 正在无限滚动。我今天的实际工作是解决这个问题。但是，我偶然发现了一个新问题，那就是

空值检查运算符

我的调试控制台指向 StaggeredGridView 作为此错误的来源。我正在努力寻找解决方案，但我做不到。

这是错误堆栈跟踪。

The following assertion was thrown during performLayout():
'package:flutter_staggered_grid_view/src/rendering/sliver_variable_size_box_adaptor.dart': Failed assertion: line 365 pos 12: 'child != null': is not true.

The relevant error-causing widget was
SliverStaggeredGrid
..\…\widgets\staggered_grid_view.dart:506
When the exception was thrown, this was the stack
#2      RenderSliverVariableSizeBoxAdaptor.paintExtentOf
package:flutter_staggered_grid_view/…/rendering/sliver_variable_size_box_adaptor.dart:365
#3      RenderSliverStaggeredGrid.performLayout
package:flutter_staggered_grid_view/…/rendering/sliver_staggered_grid.dart:317
#4      RenderObject.layout
package:flutter/…/rendering/object.dart:1777
#5      RenderSliverEdgeInsetsPadding.performLayout
package:flutter/…/rendering/sliver_padding.dart:132
#6      RenderSliverPadding.performLayout
package:flutter/…/rendering/sliver_padding.dart:371

Answer 1

我发现StaggeredGridView.builder 会在没有足够的项目覆盖屏幕时引发该错误，如果您使用shrinkWrap: true，则必须提供有界高度，这不是通用解决方案，

但是根据您的期望，StaggeredGridView.countBuilder 更适合您的情况。

所以，我使用了StaggeredGridView.countBuilder，它需要所有必要的参数，并且适用于我的HomeScreen 代码：

StaggeredGridView.countBuilder(
    padding: EdgeInsets.all(10),
    itemCount: notesList.length,
    crossAxisCount: 2,
    staggeredTileBuilder: (index) => StaggeredTile.fit(1),
    itemBuilder: (_, index) => Note(
      notesList[index].noteTitle,
      notesList[index].noteContent,
      notesList[index].noteDateTime,
    ),
  )