英文:
Flutter dynamic height gridview
问题
我想创建一个具有最多2列的网格视图的笔记应用程序，每个笔记（容器）都将具有动态高度。也就是说，如果笔记中的内容非常短（<50个字符），它应该比另一个具有更多字符的笔记具有较短的高度。示例截图如下：
英文:
I want to build a notes app that has a gridview with max 2 columns, and each note (container) will have a dynamic height. Meaning, if the content in the note is very short <50 characters, it should have a shorter height compared to another note which has more characters. Example screenshot below:
答案1
得分: 1
以下是翻译好的代码部分：
尝试以下代码：
添加以下包：
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(),
),
),
)
它将如下所示：
英文:
Try below code:
Add below package :
flutter_staggered_grid_view: ^0.6.2
Below are the list of strings that needs to display
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",
];
Below is the sample of build view
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(),
),
),
)
It will look like this,
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论