英文:
How i can place a space between my text and a icon on Row widget in flutter
问题
需要做类似这样的事情，但我不知道我可以做什么。
当我尝试使用Align移动时，图标不会移动：
我尝试过这样：
Widget AreaProfil(){
return Column(
children: [
Container(
margin: const EdgeInsets.only(left: 10.0),
padding: const EdgeInsets.only(top: 10.0, ),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Card(
child: Container(
child: Row(
children: [
const Text(
"Mon Profil",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
Align(
alignment: Alignment.centerRight,
child: Row(
children: const [
Icon(Icons.edit),
],
),
),
]
)
),
)
)
]
);
}
这个结果不起作用，所有图标都停留在左边。
英文:
I need to do something like this but I don't know what I can do.
When I try to move with Align, the icon doesn't move:
I tried this:
Widget AreaProfil(){
return Column(
children: [
Container(
margin: const EdgeInsets.only(left: 10.0),
padding: const EdgeInsets.only(top: 10.0, ),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Card(
child: Container(
child: Row(
children: [
const Text(
"Mon Profil",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
Align(
alignment: Alignment.centerRight,
child: Row(
children: const [
Icon(Icons.edit),
],
),
),
]
)
),
)
)
]
);
}
The result of this don't work and all the Icon rest on the left.
答案1
得分: 1
如果您想在多个小部件之间创建间隔，而MainAxisAlignment.spaceBetween不够用，您也可以使用Spacer或Expanded来创建这样的间隔。
Widget AreaProfil(){
return Column(
children: [
Container(
margin: const EdgeInsets.only(left: 10.0),
padding: const EdgeInsets.only(top: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Card(
child: Row(
children: [
const Text(
"Mon Profil",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
Spacer(),
Icon(Icons.edit),
Icon(Icons.edit),
],
),
),
),
],
);
}
以上是您提供的代码的翻译部分。
英文:
If you want to have a gap between several widgets and MainAxisAlignment.spaceBetween is not enough for you, you can also use Spacer or Expanded to create such a gap.
Widget AreaProfil(){
return Column(
children: [
Container(
margin: const EdgeInsets.only(left: 10.0),
padding: const EdgeInsets.only(top: 10.0, ),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Card(
child: Row(
children: [
const Text(
"Mon Profil",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
Spacer(),
Icon(Icons.edit),
Icon(Icons.edit),
),
],
),
)
)
]
);
}
答案2
得分: 0
- 需要为父级组件指定宽度
- 这是一个示例
Widget AreaProfil(BuildContext context) {
var width = MediaQuery.of(context).size.width;
return Column(children: [
Container(
width: width,
margin: const EdgeInsets.only(left: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.only(
top: 10.0,
),
child: Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"Mon Profil",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
Row(
children: [
Align(
alignment: Alignment.centerRight,
child: Row(
children: const [
Icon(Icons.edit),
],
),
),
Align(
alignment: Alignment.centerRight,
child: Row(
children: const [
Icon(Icons.edit),
],
),
)
],
)
])),
))
]);
}
英文:
- Need to specify width for parent group
- this is example
Widget AreaProfil(BuildContext context) {
var width = MediaQuery.of(context).size.width;
return Column(children: [
Container(
width: width,
margin: const EdgeInsets.only(left: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.only(
top: 10.0,
),
child: Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"Mon Profil",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
Row(
children: [
Align(
alignment: Alignment.centerRight,
child: Row(
children: const [
Icon(Icons.edit),
],
),
),
Align(
alignment: Alignment.centerRight,
child: Row(
children: const [
Icon(Icons.edit),
],
),
)
],
)
])),
))
]);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论