英文:
Flutter align center and right on a wrap widget
问题
使用Wrap小部件来对齐小部件在中心和右侧，请参阅下面的图像，我正在尝试实现的效果。
使用Wrap小部件而不是Row小部件，因为小部件在调整屏幕大小时会根据可用空间进行调整。
以下是尝试获取上述结果的代码，如图所示。
Wrap(
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
runAlignment: WrapAlignment.center,
spacing: 30.0,
children: [
Wrap(
spacing: 20,
children: const [
Text("关于我"),
Text("B"),
Text("C"),
Text("D"),
],
),
Wrap(
alignment: WrapAlignment.end,
children: [
Text("我的数据"),
],
),
],
),
但小部件未正确对齐，上述代码的输出如下。
英文:
I am using Wrap widget to align widgets on center and right, please see the below image what i am trying to achieve.
Using wrap widget instead of Row widget because widget get adjusted on available space when resizing the screen.
Below is the code tried to get the above result as shown in the image.
Wrap(
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
runAlignment: WrapAlignment.center,
spacing: 30.0,
children: [
Wrap(
spacing: 20,
children: const [
Text("About Me"),
Text("B"),
Text("C"),
Text("D"),
],
),
Wrap(
alignment: WrapAlignment.end,
children: [
Text("My Data"),
],
),
],
),
but widgets are not aligned properly, above code output as below.
答案1
得分: 2
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topRight,
child: Wrap(
alignment: WrapAlignment.center,
spacing: MediaQuery.of(context).size.width * 0.4,
children: [
Wrap(
spacing: MediaQuery.of(context).size.width * 0.05,
children: const [
Text("About Me"),
Text("B"),
Text("C"),
Text("D"),
],
),
Wrap(
alignment: WrapAlignment.end,
children: [
Text("My Data"),
],
),
],
);
}
}
}
输出如下：
<details>
<summary>英文:</summary>
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topRight,
child: Wrap(
alignment: WrapAlignment.center,
spacing: MediaQuery.of(context).size.width * 0.4,
children: [
Wrap(
spacing: MediaQuery.of(context).size.width * 0.05,
children: const [
Text("About Me"),
Text("B"),
Text("C"),
Text("D"),
],
),
Wrap(
alignment: WrapAlignment.end,
children: [
Text("My Data"),
],
),
],
),
);
}
}
here is the output
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/rQ6pR.png
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论