我想要达到的东西是这样的:
这些是我想要达到的主要限制:
“text”-s 位于下方“button”-s 上方的中央,而“thing2”能够在屏幕足够短时介于“texts”-s 之间。
我希望“按钮”-s 始终具有相同的高度/宽度(这可以通过 SizedBox 之类的工具轻松完成)并且与顶部/底部的距离相同。
我希望“thing1”最大为 x 高度,并在需要时向下缩放屏幕(通过缩小文本或使其可滚动,我还没有决定,这不是主要的问题)。
我希望“thing2”始终随屏幕缩放。
当屏幕足够大时,我希望“thing1”和“thing2”均匀地共享它们之间的空间,并且每个都位于自己空间的中心。
现在我的布局如下:
Column: MainAxisAlignment.SpaceBetween, height fixed Container: height fixed Row: MainAxisAlignment.SpaceBetween Button Button Container: height fixed thing1 Container: height calculated based on screen height and other Containers' height thing2 Container: height fixed Row: MainAxisAlignment.SpaceBetween Button Button
这当然不是全部,我试图包含有关我的布局的所有相关信息,而不是毫无意义地提供太多信息。
如何在“按钮”-s 上方添加“文本”-s? (我尝试过 Stack,但后来我不知道如何让它们出现在“button”-s 上方,同时让“thing2”也出现在它们上方。
答案 0 :(得分:0)
我设法用这段代码实现了这些东西(其中 MyBox 是一个简单的小部件,带有一个带有宽度和高度的彩色容器):
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
const double buttonHeight = 35;
const double buttonWidth = 100;
const double textHeight = 40;
const double textWidth = 30;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: buttonWidth,
height: buttonHeight,
child: MyBox(Colors.red),
),
),
Align(
alignment: Alignment.topRight,
child: SizedBox(
width: buttonWidth,
height: buttonHeight,
child: MyBox(Colors.yellow),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: textWidth,
height: textHeight,
child: MyBox(Colors.green),
),
),
SizedBox(
width: buttonWidth,
height: buttonHeight,
child: MyBox(Colors.cyan),
),
],
),
),
Align(
alignment: Alignment.bottomRight,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: textWidth,
height: textHeight,
child: MyBox(Colors.indigo),
),
),
SizedBox(
width: buttonWidth,
height: buttonHeight,
child: MyBox(Colors.blue),
),
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
width: buttonWidth,
height: buttonHeight,
child: MyBox(Colors.orange),
),
),
Positioned(
left: 0,
top: 0,
right: 0,
bottom: buttonHeight,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Flexible(
fit: FlexFit.loose,
child: MyBox(Colors.purple),
),
Flexible(
fit: FlexFit.loose,
child: MyBox(Colors.brown),
),
],
),
),
],
),
);
}
}
TLDR:我使用 Stack 小部件来保存我的其他小部件,并使用 Align 小部件在 Stack 中对齐(废话)我的小部件。
我使用了一个 Column 将我的文本居中放置在我下方的按钮上方。 “mainAxisAlignment: MainAxisAlignment.end”很重要,因此该列位于底部而不是顶部。
最后,我将 Stack 包裹在 Padding 中。