英文:
How do I create a random stack of containers in flutter?
问题
看这个:
我正在尝试在Flutter中复制这个，但似乎很难。
注意“Linguistics”标签正好位于医疗保健和数据科学之间。
还有这个:
我尝试过简单的Row/Columns，但它们出现了溢出错误。
Stack/Positioned在容器开始重叠时起作用。
英文:
see this : -
<img src="https://i.stack.imgur.com/Lvt1C.png">
I am trying to replicate this in Flutter but seems impossible
Notice how the "Linguistics" pill perfectly fits between healthcare and data science
and this : -
<img src="https://i.stack.imgur.com/Bf6kD.png">
I tried simple Row/Columns but they had overflow errors
Stack/Positioned was working until the containers started overlapping each other
答案1
得分: 1
你可以使用Positioned与Stack并根据需要自定义。以下是输出。
Stack(
children: [
Positioned(
left: 40,
top: 42,
child: Transform.rotate(
angle: math.pi / 20,
child: Chip(
backgroundColor: Colors.grey,
label: Text("IT & Development"),
),
),
),
Positioned(
top: 80,
child: Transform.rotate(
angle: -math.pi / 12,
child: Chip(
backgroundColor: Colors.teal,
label: Text("Healthcare"),
),
),
),
Positioned(
left: 87,
top: 112,
child: Transform.rotate(
angle: math.pi / 6,
child: Chip(
backgroundColor: Colors.amber,
label: Text("IT & Development"),
),
),
),
Positioned(
left: 30,
top: 130,
child: Transform.rotate(
angle: math.pi / 10,
child: Chip(
backgroundColor: Colors.pink,
label: Text("IT & Development"),
),
),
),
],
)
英文:
You can use positioned with stack and customize for yourself. Output is below.
Stack(
children: [
Positioned(
left: 40,
top: 42,
child: Transform.rotate(
angle: math.pi / 20,
child: Chip(
backgroundColor: Colors.grey,
label: Text("IT & Development"),
),
),
),
Positioned(
top: 80,
child: Transform.rotate(
angle: -math.pi / 12,
child: Chip(
backgroundColor: Colors.teal,
label: Text("Healthcare"),
),
),
),
Positioned(
left: 87,
top: 112,
child: Transform.rotate(
angle: math.pi / 6,
child: Chip(
backgroundColor: Colors.amber,
label: Text("IT & Development"),
),
),
),
Positioned(
left: 30,
top: 130,
child: Transform.rotate(
angle: math.pi / 10,
child: Chip(
backgroundColor: Colors.pink,
label: Text("IT & Development"),
),
),
),
],
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论