英文:
Push a widget to the end of the screen - Flutter
问题
我有一个屏幕，上面有2个（顶级）小部件，一个Card()和一个Button()。
Card()必须放置在屏幕的中间，按钮放在最下面。
现在，我已经将这两个小部件作为Column()的children[]的一部分，并将其MainAxisAlignment()设置为居中。
现在，这显然会将这两个小部件放在屏幕的中间，我尝试了以下方法来将Button()放在末尾。
-
为Card()使用Expanded()。但这会改变Card()的高度，并将剩余空间分配给它，覆盖我为它指定的高度。
-
在两个小部件之间使用SizedBox()。但这会将两个小部件推向相反的方向。
-
在Button()周围使用Align()。但将Alignment.bottomCenter()分配给它的对齐方式没有任何区别。
-
为Button()使用Expanded()。但这会产生与#1相同的视觉效果，唯一不同的是现在Button()占据了整个空间。
-
在两个小部件之间使用Spacer()。但这会将两个小部件推向两端。
这是我的代码（未实现上述任何方法）
如何实现所需的UI？
英文:
I have a screen and it has 2 (top-level) widgets, a Card() and a Button()
The Card() has to be placed at the center of the screen and the button at the end.
Now, I've centered the MainAxisAlignment() of the Column() where both the above widgets are parts of its children[].
Now, this obviously puts both the widgets at the center of the screen and I've tried the following approaches to put the Button() at the end.
-
Use Expanded() for the Card(). But this alters the height of the Card() and assigns the remaining space to it and trumps the height that I've specified to it.
-
Use SizedBox() between the two widgets. But this push both the widgets in the opposite direction.
-
Use Align() around the Button(). But assigning Alignment.bottomCenter() to its alignment makes no difference.
-
Use Expanded() for the Button(). But this produces the same visual result as #1, only thing is now the Button() is taking the entire space.
-
Use Spacer() between both the widgets. But this pushes both the widgets to the extreme ends.
Here's my code (without any of the above approaches implemented)
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.35,
child: Card(
elevation: 10.0,
color: Colors.white,
child: Container(
margin: const EdgeInsets.symmetric(
vertical: 30,
horizontal: 20,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Your Phone!',
style: GoogleFonts.poppins(
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Phone Number'),
TextField(),
],
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Text(
'A 4 digit OTP will be sent via SMS to verify your mobile number!'),
],
),
),
),
),
ElevatedButton(
onPressed: () {},
child: const Text('Continue'),
),
],
),
)
What should I do to achieve the desired UI?
答案1
得分: 0
尝试使用 Spacer 填充空白。
英文:
Try filling the gaps with Spacer.
import 'package:flutter/material.dart';
class _CardView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Spacer(),
SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.35,
child: Card(
elevation: 10.0,
color: Colors.white,
child: Container(
margin: const EdgeInsets.symmetric(
vertical: 30,
horizontal: 20,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Your Phone!',
style: GoogleFonts.poppins(
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Phone Number'),
TextField(),
],
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Text(
'A 4 digit OTP will be sent via SMS to verify your mobile number!'),
],
),
),
),
),
const Spacer(),
ElevatedButton(
onPressed: () {},
child: const Text('Continue'),
),
const Spacer(),
],
),
);
}
}
答案2
得分: 0
在卡片前放一个 Spacer，然后在卡片后放一个 Expanded，这样它将是对称的，然后您可以使用 Align 将按钮定位在第二个 Expanded 内部，如您所希望的那样。
Scaffold(
body: Column(
children: [
const Spacer(),
SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.35,
child: Card(
elevation: 10.0,
color: Colors.white,
child: Container(
margin: const EdgeInsets.symmetric(
vertical: 30,
horizontal: 20,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Your Phone!',
style: GoogleFonts.poppins(
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Phone Number'),
TextField(),
],
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Text(
'A 4 digit OTP will be sent via SMS to verify your mobile number!'),
],
),
),
),
),
Expanded(
child: Align(
alignment: Alignment.center,
child: ElevatedButton(
onPressed: () {},
child: const Text('Continue'),
),
),
),
],
),
);
英文:
Put an Spacer before the card and an Expanded after it so it will be symmetrical, then you can position the button inside the second expanded as you want with Align.
Scaffold(
body: Column(
children: [
const Spacer(),
SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.35,
child: Card(
elevation: 10.0,
color: Colors.white,
child: Container(
margin: const EdgeInsets.symmetric(
vertical: 30,
horizontal: 20,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Your Phone!',
style: GoogleFonts.poppins(
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Phone Number'),
TextField(),
],
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Text(
'A 4 digit OTP will be sent via SMS to verify your mobile number!'),
],
),
),
),
),
Expanded(
child: Align(
alignment: Alignment.center,
child: ElevatedButton(
onPressed: () {},
child: const Text('Continue'),
),
),
),
],
),
);
答案3
得分: 0
以下是您要翻译的内容：
尝试使用如下代码中的扩展小部件：
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Align(
alignment: Alignment.center,
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.35,
child: Card(
elevation: 10.0,
color: Colors.white,
child: Container(
margin: const EdgeInsets.symmetric(
vertical: 30,
horizontal: 20,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Your Phone!',
style: GoogleFonts.poppins(
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Phone Number'),
TextField(),
],
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Text(
'A 4 digit OTP will be sent via SMS to verify your mobile number!'),
],
),
),
),
),
),
),
ElevatedButton(
onPressed: () {},
child: const Text('Continue'),
),
],
),
)
英文:
Tru to Use Expanded Widget like below Code:
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Align(
alignment: Alignment.center,
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.35,
child: Card(
elevation: 10.0,
color: Colors.white,
child: Container(
margin: const EdgeInsets.symmetric(
vertical: 30,
horizontal: 20,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Your Phone!',
style: GoogleFonts.poppins(
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Phone Number'),
TextField(),
],
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Text(
'A 4 digit OTP will be sent via SMS to verify your mobile number!'),
],
),
),
),
),
),
),
ElevatedButton(
onPressed: () {},
child: const Text('Continue'),
),
],
),
)
答案4
得分: 0
你只需在卡片周围添加两个Spacer小部件，查看下面的代码：
Widget _cardButton2() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Spacer(),
SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.35,
child: Card(
elevation: 10.0,
color: Colors.white,
child: Container(
margin: const EdgeInsets.symmetric(
vertical: 30,
horizontal: 20,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Your Phone!',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 40),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Phone Number'),
TextField(),
],
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Text(
'A 4 digit OTP will be sent via SMS to verify your mobile number!'),
],
),
),
),
),
const Spacer(),
ElevatedButton(
onPressed: () {},
child: const Text('Continue'),
),
],
),
);
}
英文:
Simple you need to the add two Spacer widgets surrounding the card, see the below code:
Widget _cardButton2() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Spacer(),
SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.35,
child: Card(
elevation: 10.0,
color: Colors.white,
child: Container(
margin: const EdgeInsets.symmetric(
vertical: 30,
horizontal: 20,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Your Phone!',
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 40),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Phone Number'),
TextField(),
],
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
const Text(
'A 4 digit OTP will be sent via SMS to verify your mobile number!'),
],
),
),
),
),
const Spacer(),
ElevatedButton(
onPressed: () {},
child: const Text('Continue'),
),
],
),
);}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论