英文:
How to fix a container at a particular spot on the screen
问题
我正在学习Flutter，制作了一个类似这样的应用程序：
我面临的问题是如何将容器固定在屏幕上的特定位置，就像它必须与顶部中心对齐一样。这是我面临的问题：
以下是代码：
class Program7 extends StatefulWidget {
const Program7({super.key});
@override
State<Program7> createState() => _Program7State();
}
class _Program7State extends State<Program7> {
double cHeightAndWidth = 300;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
height: cHeightAndWidth,
width: cHeightAndWidth,
decoration: BoxDecoration(
color: Colors.purple,
),
),
Column(
children: [
//一堆按钮的行，
],
),
],
),
);
}
}
附注：我已经尝试使用align将容器固定在另一个容器的顶部中心，但紫色颜色似乎渗出到了较大的容器中。
英文:
I'm learning flutter and I have made an app that looks like this:
I'm facing a problem as to how to fix the container fixed on a particular spot on the screen like it has to be aligned to the top center. Here's the problem I'm facing:
Here's the code:
class Program7 extends StatefulWidget {
const Program7({super.key});
@override
State<Program7> createState() => _Program7State();
}
class _Program7State extends State<Program7> {
double cHeightAndWidth = 300;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
height: cHeightAndWidth,
width: cHeightAndWidth,
decoration: BoxDecoration(
color: Colors.purple,
),
),
Column(
children: [
//A bunch of rows of buttons,
],
),
],
),
);
}
}
P.S.: I already tried to fix the container to the top center of another container using align but the purple color somehow bleeds out into the bigger container.
答案1
得分: 1
问题出在使用了MainAxisAlignment.spaceAround。它会使用剩余的空间，将一半放在子元素前面，另一半放在子元素后面。
对于顶部的容器，您可以使用固定的间隙。
return SafeArea(
child: Column(
children: [
SizedBox(height: 50),
Container(
height: cHeightAndWidth,
width: cHeightAndWidth,
decoration: BoxDecoration(
color: Colors.purple,
),
),
Spacer(), // 或其他小部件
Column(
children: [
// 一堆按钮行,
],
),
],
),
);
英文:
The issue is using MainAxisAlignment.spaceAround,. It will use the free space and put half before and another half at end of the child.
You can use fixed gap for top(Container).
return SafeArea(
child: Column(
children: [
SizedBox(height: 50),
Container(
height: cHeightAndWidth,
width: cHeightAndWidth,
decoration: BoxDecoration(
color: Colors.purple,
),
),
Spacer(), // or other widget
Column(
children: [
//A bunch of rows of buttons,
],
),
],
),
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论