英文:
How to change the location of ElevateButton to the right side, which properties or widgets help me to do that?
问题
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
child: Column(
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
alignment: Alignment.centerRight, // 将按钮位置调整到右侧
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(
height: 50.0,
),
],
),
),
),
英文:
I don't want the button to be in the centre instead of that I want to change the location of the button to the right and I don't know how to do that. I need some help
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
child: Column(
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(
height: 50.0,
),
],
),
),
),
I tried to use Padding, but I'm new to Flutter
答案1
得分: 0
尝试使用 Align 小部件,例如
Align(
alignment: Alignment.centerRight,
child: ElevatedButton(
英文:
Try using Align widget like
Align(
alignment: Alignment.centerRight,
child: ElevatedButton(
答案2
得分: 0
将ElevatedButton包裹在Row中,并将Expanded(child: SizedBox.expand())添加为此行的第一个子元素,ElevatedButton作为第二个子元素。
英文:
Wrap the ElevatedButton in Row and add Expanded(child: SizedBox.expand()) as first child to this row and ElevatedButton as 2nd child.
答案3
得分: 0
你可以给你的列使用 crossAxisAlignment
:
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(
height: 50.0,
),
],
)
如果这不起作用,你也可以这样做:
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(child: Container()),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
],
),
SizedBox(
height: 50.0,
),
],
)
英文:
You can give crossAxisAlignment
to your column:
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(
height: 50.0,
),
],
If this doesn't work, you can also do this:
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(child: Container()),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
],
),
SizedBox(
height: 50.0,
),
],
答案4
得分: 0
这取决于小部件树以及其对齐方式。您的Padding
小部件可能被包装在某个居中对齐的小部件内。因此,假设您的Padding
小部件的对齐方式不受任何父级小部件的影响。以下是解决方法:
有多种方法可以实现这一点。例如,
- 您可以在
Column
属性中添加crossAxisAlignment: CrossAxisAlignment.end,
。 - 您可以将您的
ElevatedButton
包装在Row
内,并添加mainAxisAlignment: MainAxisAlignment.end,
属性。 - 您可以使用
Align
类来实现这一点。
就像这样,这里我为演示的目的同时使用了Column
和Row
的对齐方式。但您可以根据实际情况选择最适合您的方式。
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(
height: 50.0,
),
],
),
],
),
),
)
英文:
It depends on the widget tree, how its aligned. Your Padding
widget may be wrapped inside some widget which is center aligned. So assuming that your Padding
widget alignment is not affected by any parent widget. Here is solution to this.
There are multiple approaches for that. For example,
- You can add
crossAxisAlignment: CrossAxisAlignment.end,
inColumn
attributes. - You can wrap your
ElevatedButton
inside aRow
and add themainAxisAlignment: MainAxisAlignment.end,
attributes. - You can use
Align
class to make it work.
Just like this, here i have used both Column
and Row
alignments for the sake of demonstration. But you can use whatever suits best to your situation.
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(
height: 50.0,
),
],
),
],
),
),
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论