空值上使用的空检查运算符 - StaggeredGridView

编程问答 2022-05-28

问题描述

我正在开发一个 '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

解决方法

我发现 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,),)
flutter-layoutstaggered-gridview