如何在 ListView.builder 上使用 Wrap？

Question

我希望屏幕看起来更像这样：

但是，现在它看起来像这样：

我在仍然使用 ListView.Builder 的同时尝试了多种不同的方法来实现这一点，但是，它们都不起作用。完成此任务的更好方法是什么？

当前代码：

import 'package:flutter/material.dart';
import 'package:stack_notes/models/note_folder.dart';

class NotesScreen extends StatefulWidget {
  final List<NoteFolder> noteFolders;
  final Function onTapCallback;

  NotesScreen({this.noteFolders, this.onTapCallback});

  @override
  _NotesScreenState createState() => _NotesScreenState();
}

class _NotesScreenState extends State<NotesScreen> {
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: ListView.builder(
          itemCount: widget.noteFolders.length,
          itemBuilder: (context, index) {
            return Padding(
              padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
              child: InkWell(
                onTap: widget.onTapCallback,
                child: Container(
                  width: 180.0,
                  padding: EdgeInsets.all(10.0),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.white30),
                  ),
                  child: Row(
                    children: <Widget>[
                      Icon(
                        Icons.folder,
                        color: widget.noteFolders[index].iconColor,
                        size: 20.0,
                      ),
                      SizedBox(width: 10.0),
                      Flexible(
                        child: Text(
                          widget.noteFolders[index].title,
                          style: TextStyle(fontSize: 16.0),
                          overflow: TextOverflow.ellipsis,
                          softWrap: false,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Answer 1

尝试使用 GridView，它将适合您的情况：

  GridView.builder(
    itemCount: 100,
    gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      childAspectRatio: 1,
    ),
    itemBuilder: (BuildContext context, int index) {
      return Center(child: Text("Item $index"));
    },
  )