这就是我的想法

class NotePage extends StatefulWidget {
  const NotePage({super.key});

  @override
  State<NotePage> createState() => _NotePageState();
}

class _NotePageState extends State<NotePage> {
  List<Note> notes = const [
    Note(title: 'To Do List', content: 'fjskfjsk0'),
    Note(title: 'Travelling', content: 'fjskfjsk1'),
    Note(title: 'Travelling', content: 'fjskfjsk2'),
    Note(title: 'Travelling', content: 'fjskfjsk3'),
    Note(title: 'Travelling', content: 'fjskfjsk4'),
    Note(title: 'Travelling', content: 'fjskfjsk5'),
    Note(title: 'Travelling', content: 'fjskfjsk6'),
  ];

  late List<Note> notes1;
  late List<Note> notes2;

  @override
  void initState() {
    super.initState();
    // I chose to split the list in two, with the first half in notes1 and the second half in notes2
    // You can do it however you want
    notes1 = notes.sublist(0, notes.length ~/ 2);
    notes2 = notes.sublist(notes.length ~/ 2);
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const [
                Icon(Icons.menu),
                Text('Home'),
                Icon(Icons.search),
              ],
            ),
            Row(
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 25.0),
                  child: SizedBox(
                    height: 500,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Column(
                          children: notes1
                              .map((e) => NoteBlock(
                                    title: e.title,
                                    content: e.content,
                                  ))
                              .toList(),
                        ),
                        Column(
                          children: notes2
                              .map((e) => NoteBlock(
                                    title: e.title,
                                    content: e.content,
                                  ))
                              .toList(),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

class NoteBlock extends StatelessWidget {
  final String title;
  final String content;

  const NoteBlock({
    super.key,
    required this.title,
    required this.content,
  });

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(4.0),
        child: Container(
          color: const Color(0xFFF7F7F7),
          height: 100,
          width: MediaQuery.of(context).size.width / 2 - 30,
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(fontSize: 20),
                ),
                const SizedBox(height: 20),
                Text(content),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class Note {
  final String title;
  final String content;

  const Note({
    required this.title,
    required this.content,
  });
}

当添加注解（删除、更改等）时，请确保更改notes变量，并调用NotePage小部件的setState！希望它能有所帮助

我发现了一个很好的方法来实现它，使用一个名为flutter_staggered_grid_view的第三方软件包，下面是代码：

MasonryGridView.count(
                crossAxisCount: 2,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                itemCount: notes.length,
                itemBuilder: (context, index) {
                  return notes[index];
                },
              ),

notes列表包含NoteBook小部件列表。