英文:
How can I center Row widget in container Flutter?
问题
我想要将Row小部件居中在Container中，但无法做到。
期望设计
我的期望设计如下：
<img src="https://i.stack.imgur.com/qnA1y.png">
但我得到了以下输出：
我的输出：
<img src="https://i.stack.imgur.com/RyHeN.jpg">
以下是我的代码：
Container(
height: Dimensions.height40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(Dimensions.radius10),
color: Colors.white,
),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
child: Row(
mainAxisAlignment: MainAxisAlignment.center, // 将这行更改为居中对齐
children: [
Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
],
),
),
)
SmallText
class SmallText extends StatelessWidget {
final Color? color;
final String text;
final double size;
final TextAlign? align;
const SmallText({
Key? key,
this.color = const Color(0xffCF1357),
this.size = 16,
required this.text,
this.align = TextAlign.center,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text(
text,
textAlign: align,
style: TextStyle(
color: color,
fontSize: size,
fontFamily: 'ROCK',
),
);
}
}
请注意，我已将Row的mainAxisAlignment属性更改为MainAxisAlignment.center，以实现在Container中将其居中对齐的效果。
英文:
I want to center the Row widget in Container but can't do it.
Desire Design
My desire Design look like this : -
<img src="https://i.stack.imgur.com/qnA1y.png">
but I'm getting this output
My Output : -
<img src="https://i.stack.imgur.com/RyHeN.jpg">
Here is my code : -
Container(
height: Dimensions.height40,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(Dimensions.radius10), color: Colors.white),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
],
),
),
),
SmallText
class SmallText extends StatelessWidget {
final Color? color;
final String text;
final double size;
final TextAlign? align;
const SmallText({
Key? key,
this.color = const Color(0xffCF1357),
this.size = 16,
required this.text, this.align=TextAlign.center,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text(
text,
textAlign: align,
style: TextStyle(
color: color, fontSize: size, fontFamily: 'ROCK'),
);
}
}
答案1
得分: 0
替换你的 Row 小部件
从
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
],
),
到
Row(
children: [
Icon(Icons.chevron_right_outlined, color: Colors.red),
Expanded(
child: Text(
"asdfasdfasdfadsfadsf",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red, fontSize: 12, fontFamily: 'ROCK'),
),
),
],
)
英文:
Replace your Row widget
> From
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
],
),
> To
Row(
children: [
Icon(Icons.chevron_right_outlined, color: Colors.red),
Expanded(
child: Text(
"asdfasdfasdfadsfadsf",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red, fontSize: 12, fontFamily: 'ROCK'),
),
),
],
),
答案2
得分: 0
尝试以下代码：
ElevatedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.network(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTffY2_D5YjjG8Mn3NnOFrXG2Piu72Ff5rbyHiyZXFvkWWtE3pLojAwOXpxAbC7PZa0JpU&usqp=CAU',
height: 40,
), //use your google image here
Text(
'使用 Google 登录',
style: TextStyle(
color: Colors.black,
),
),
SizedBox()
],
),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
fixedSize: const Size(250, 50),
),
)
结果-> 
英文:
Try below code:
ElevatedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.network(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTffY2_D5YjjG8Mn3NnOFrXG2Piu72Ff5rbyHiyZXFvkWWtE3pLojAwOXpxAbC7PZa0JpU&usqp=CAU',
height: 40,
), //use your google image here
Text(
'Sign in with Google',
style: TextStyle(
color: Colors.black,
),
),
SizedBox()
],
),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white, fixedSize: const Size(250, 50)),
),
Result->
答案3
得分: 0
请尝试这种方式...
Container(
height: Dimensions.height40,
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(Dimensions.radius10), color: Colors.white),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
),
SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
// 如果文本溢出
// Expanded(child: Text('text', maxLines: 2)),
],
),
),
),
英文:
try this way...
Container(
height: Dimensions.height40,
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(Dimensions.radius10), color: Colors.white),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
),
SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
// if text overflowing
// Expanded(child: Text('text', maxLines: 2)),
],
),
),
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论