用于空值的空检查运算符 - 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 无限滚动。我今天的实际工作就是解决这个问题。但是，我偶然发现了一个新问题，那就是

Null check operator used on a null value

我的调试控制台指向 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,
    ),
  )

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

Null check operator used on a null value - StaggeredGridView

staggered-gridview

flutter

flutter-layout