Flutter动态高度网格视图

eh57zj3b  于 2023-06-24  发布在  Flutter
关注(0)|答案(1)|浏览(103)

我想构建一个具有最多2列网格视图的notes应用程序,每个notes(容器)将有一个动态高度。这意味着,如果注解中的内容非常短,<50个字符,则与具有更多字符的另一个注解相比,它的高度应该更短。下面是示例屏幕截图:
Sample screenshot

mnemlml8

mnemlml81#

试试下面的代码:
添加以下 Package :

flutter_staggered_grid_view: ^0.6.2

下面是需要显示的字符串列表

List<String> items = [
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labori",
    "i ut aliquip ex ea commodo consequat. Duis aute irure dolor in rep",
    " dolor sit amet, consectetur adipiscing elit, sed do eiusmod tem",
    "liquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ",
    "lpa qui officia deserunt mollit anim id est laborum.",
    "eniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "unt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q",
    "t in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "sfgdf",
    "i ut aliquip ex ea commodo consequat. Duis aute irure dolor in rep",
    " dolor sit amet, consectetur adipiscing elit, sed do eiusmod tem",
    "liquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ",
    "lpa qui officia deserunt mollit anim id est laborum.",
    "eniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "unt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q",
    "t in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "sfgdf",
  ];

下面是构建视图的示例

SingleChildScrollView(
          child: Container(
            color: Colors.grey,
            margin: EdgeInsets.all(12),
            child: StaggeredGrid.count(
              crossAxisCount: 2,
              crossAxisSpacing: 10,
              mainAxisSpacing: 12,
              children: items
                  .map((item) => Container(
                padding: const EdgeInsets.all(10),
                        decoration: const BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.all(Radius.circular(15))),
                        child: Text(item),
                      ))
                  .toList(),
            ),
          ),
        )

它看起来像这样,

相关问题