如何在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"));
    },
  )

Answer 2

使用GridView.count并声明childAspectRatio属性，

childAspectRatio是每个孩子的横轴与主轴范围之比。

GridView.count(
          childAspectRatio: 5.0 / 1.0,
          // Create a grid with 2 columns. If you change the scrollDirection to
          // horizontal, this produces 2 rows.
          crossAxisCount: 2,
          // Generate 100 widgets that display their index in the List.
          children: List.generate(100, (index) {
            return 
              Container(
                width: double.infinity,
                height:double.infinity,
                 child: Card(
                      child :  Center(child:Text(
                'Item $index',
                style: Theme.of(context).textTheme.headline,
              ))));
          }),
        )

输出：在dartpad中测试

完整示例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Grid List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: GridView.count(
          childAspectRatio: 5.0 / 1.0,
          // Create a grid with 2 columns. If you change the scrollDirection to
          // horizontal, this produces 2 rows.
          crossAxisCount: 2,
          // Generate 100 widgets that display their index in the List.
          children: List.generate(100, (index) {
            return 
              Container(
                width: double.infinity,
                height:double.infinity,
                 child: Card(
                      child :  Center(child:Text(
                'Item $index',
                style: Theme.of(context).textTheme.headline,
              ))));
          }),
        ),
      ),
    );
  }
}

Answer 3

这里是确切布局的确切答案。您需要GridView而不是listView

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {

    /*24 is for notification bar on Android*/

  @override
  Widget build(BuildContext context) {
    return GridView.count(
          // Create a grid with 2 columns. If you change the scrollDirection to
          // horizontal, this produces 2 rows.
          crossAxisCount: 2,
          childAspectRatio: 5.0 / 1.0,
      mainAxisSpacing: 10.0,
      crossAxisSpacing: 10.0,
          // Generate 100 widgets that display their index in the List.
          children: List.generate(100, (index) {
            return Container(
              padding: EdgeInsets.all(10.0),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.white30),
                  ),
              child:Row(
                children: <Widget>[
                  Icon(Icons.folder,color:Colors.yellow),
                  SizedBox(width:20.0),
                  Text('Folder Name')
                ],
              )
            );
          }));
  }
}

布局的屏幕在这里