英文:
Listview How to go to next/new row?
问题
我已经使用Flutter几个月了，现在我遇到了一个问题，需要设计一个UI来显示给用户看，如下面的图片所示。
我想要在ListView内部创建新的行，有人知道如何做吗？
Container(
width: double.infinity,
height: 35,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
GestureDetector(
onTap: () async {
setState(() {
category2 = 1;
});
print("选择设置和测试");
},
child: Card(
color: Color.fromARGB(255, 27, 175, 224),
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
children: [
Text(
"选择设置和测试",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
GestureDetector(
onTap: () async {
setState(() {
category2 = 2;
});
print("选择容量");
},
child: Card(
color: Color.fromARGB(255, 27, 175, 224),
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
children: [
Text(
"选择容量",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
// 其他按钮可以继续添加在这里
],
),
)
英文:
I have been using flutter for past few months and now I have stuck in a problem where i have to design a ui to show the button to user as the image given below.
I want to go to new row inside a listview, anyone know how to make it ?
Container(
width: double.infinity,
height: 35,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
GestureDetector(
onTap: () async {
setState(() {
category2 = 1;
});
print("Selection Setting and Testing");
},
child: Card(
color: Color.fromARGB(255, 27, 175, 224),
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
children: [
Text(
"Selection Setting and Testing",
style: TextStyle(color: Colors.white),
),
],
),
)),
),
GestureDetector(
onTap: () async {
setState(() {
category2 = 2;
});
print("Selection Capacity");
},
child: Card(
color: Color.fromARGB(255, 27, 175, 224),
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
children: [
Text(
"Selection Capacity",
style: TextStyle(color: Colors.white),
),
],
),
)),
),
答案1
得分: 2
使用Wrap小部件而不是Listview，希望对您有所帮助。
Wrap(
// spacing: 8.0, // 邻近芯片之间的间距
// runSpacing: 4.0, // 行之间的间距
direction: Axis.horizontal,
children: [
GestureDetector(
onTap: () async {
print("Selection Setting and Testing");
},
child: Card(
color: Color.fromARGB(255, 27, 175, 224),
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
children: [
Text(
"Selection Setting and Testing",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
GestureDetector(
onTap: () {
print("Selection Capacity1");
},
child: Card(
color: Color.fromARGB(255, 27, 175, 224),
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
children: [
Text(
"Selection Capacity",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
GestureDetector(
onTap: () {
print("Selection Capacity2");
},
child: Card(
color: Color.fromARGB(255, 27, 175, 224),
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
children: [
Text(
"Selection Capacity",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
GestureDetector(
onTap: () {
print("Selection Capacity3");
},
child: Card(
color: Color.fromARGB(255, 27, 175, 224),
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
children: [
Text(
"Selection Capacity",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
GestureDetector(
onTap: () {
print("Selection Capacity4");
},
child: Card(
color: Color.fromARGB(255, 27, 175, 224),
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
children: [
Text(
"Selection Capacity",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
],
)
结果-> 
英文:
Use Wrap widget instead of Listview hope its help to you.
Wrap(
// spacing: 8.0, // gap between adjacent chips
// runSpacing: 4.0, // gap between lines
direction: Axis.horizontal,
children: [
GestureDetector(
onTap: () async {
print("Selection Setting and Testing");
},
child: Card(
color: Color.fromARGB(255, 27, 175, 224),
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
children: [
Text(
"Selection Setting and Testing",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
GestureDetector(
onTap: () {
print("Selection Capacity1");
},
child: Card(
color: Color.fromARGB(255, 27, 175, 224),
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
children: [
Text(
"Selection Capacity",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
GestureDetector(
onTap: () {
print("Selection Capacity2");
},
child: Card(
color: Color.fromARGB(255, 27, 175, 224),
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
children: [
Text(
"Selection Capacity",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
GestureDetector(
onTap: () {
print("Selection Capacity3");
},
child: Card(
color: Color.fromARGB(255, 27, 175, 224),
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
children: [
Text(
"Selection Capacity",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
GestureDetector(
onTap: () {
print("Selection Capacity4");
},
child: Card(
color: Color.fromARGB(255, 27, 175, 224),
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
children: [
Text(
"Selection Capacity",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
],
),
Result->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论